Question

I wrote a code to show images one at a time from my div. My code is working, but the problem is when last image is reached, then the next image would be the first image again. In my case the slide show stops at last image. Suppose my div has four images. When I test it then one images is showing at a time, but when last images is reached then the slide show is stopped. I mean the next image is not showing. Where the first image should show as the next image.

Here I am posting my full code. Someone please have a look and tell me what is the problem in the code and, if possible, then please rectify it.

my implementation url http://jsfiddle.net/tridip/jwxzv/

 $(document).ready(function () {
    slideShow();
});

function slideShow() {
    $('#gallery img').css({ opacity: 0.0 });
    $('#gallery img:first').css({ opacity: 1.0 });
    setInterval('gallery()', 2000);
}

function gallery() {
    var current = ($('#gallery .show') ? $('#gallery .show') : $('#gallery img').first());
    var next = (current.next().length > 0 ? current.next() : $('#gallery img').first());
    next.css({ opacity: 0.0 })
    .addClass('show')
    .animate({ opacity: 1.0 }, 1000);
    current.animate({ opacity: 0.0 }, 1000).removeClass('show');
}

<style type="text/css">

.clear {
clear:both
}

#gallery {
    position:relative;
    height:360px
}
#gallery img {
    float:left;
    position:absolute;
}

#gallery img {
    border:none;
}

#gallery show {
    z-index:500
}

 </style>

<div id="gallery">
<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" class="show"  />
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" />
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" />
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" />
</div>

Answer 1

Here is corrected code http://jsfiddle.net/jwxzv/3/