Member Avatar for solomon_13000

I attempted to implement image rotation using google jquery library. The problem is that the image

rotation stops at 5.jpg and doesn't go back to 1.jpg to 2.jpg.........and so on. Did I miss out

something?

<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
<script type="text/javascript" src="js/img-rotator.js">
</script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
     <div id="rotating-img-container">
           <img class="rotating-img-item" src="images/1.jpg" />
           <img class="rotating-img-item" src="images/2.jpg" />
           <img class="rotating-img-item" src="images/3.jpg" />
           <img class="rotating-img-item" src="images/4.jpg" /> 
           <img class="rotating-img-item" src="images/5.jpg" /> 
     </div>
</body>
</html>



$(window).load(function(){

    var rotator = {

        init: function(){

                    var imgCount = $('.rotating-img-item').length;

                    var currentImg = 0;

                    $('.rotating-img-item').eq(currentImg).fadeIn(1000);

                    var loop = setInterval(function(){

                $('.rotating-img-item').eq(currentImg).fadeIn(1000);

                if(currentImg == imgCount - 1){
                                currentImg = 0;  
                }else{
                                currentImg++;
                        }

                        $('.rotating-img-item').eq(currentImg).fadeIn(1000);    

                },5000); 
        }
    };

        rotator.init();
});




#rotating-img-container {
    position: relative;
    width: 980px;
    height: 347px;
}
.rotating-img-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
Edited by solomon_13000
  • 2 Contributors
  • 1 Reply
  • 316 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by paulkd
Member Avatar for paulkd 
<style type="text/css">
#rotating-img-container {
    position:relative;
}
#rotating-img-container img {
    position:absolute;
}
</style>

<div id="rotating-img-container">
    <img class="rotating-img-item" src="images/1.jpg" />
    <img class="rotating-img-item" src="images/2.jpg" />
    <img class="rotating-img-item" src="images/3.jpg" />
    <img class="rotating-img-item" src="images/4.jpg" /> 
    <img class="rotating-img-item" src="images/5.jpg" /> 
</div>

<script>
function rotateImage()
{
    var $e = $("#rotating-img-container");
    $e.find("img").last().fadeOut("slow",function(){
        $(this).prependTo($e);
        $(this).css({display:"inline"});
    });
}

$(window).load(function(){

    setInterval(rotateImage,3000);

});
</script>

This works with jQuery 1.4.2, but you should review your version. 1.9.1 is current.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.