如何无限循环jQuery画廊

Question

我使用jQuery创建了一个图像幻灯片,其中5个图像在25秒的间隔内一个接一个地出现.每个图像在淡出之前保持5秒,然后下一个图像淡入.
幻灯片显示正常但我希望它永远循环, 即在最后一个图像淡出后,它应该从第一个图像重新开始动画.
我试过用setInterval但不能成功.这是我编写的幻灯片的工作示例:

的jsfiddle

这是完整的代码:

HTML:

<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />

使用Javascript:

$(document).ready(function(){
    $("#img2,#img3,#img4,#img5").hide();
    setTimeout(function(){
        $("#img1").fadeOut("slow", function () {});
    }, 5000);
    setTimeout(function(){
        $("#img2").fadeIn("slow", function () {});
    }, 5000);    
    setTimeout(function(){
        $("#img2").fadeOut("slow", function () {});
    }, 10000); 
    setTimeout(function(){
        $("#img3").fadeIn("slow", function () {});
    }, 10000);
    setTimeout(function(){
        $("#img3").fadeOut("slow", function () {});
    }, 15000); 
    setTimeout(function(){
        $("#img4").fadeIn("slow", function () {});
    }, 15000);
    setTimeout(function(){
        $("#img4").fadeOut("slow", function () {});
    }, 20000);
    setTimeout(function(){
        $("#img5").fadeIn("slow", function () {});
    }, 20000);
    setTimeout(function(){
        $("#img5").fadeOut("slow", function () {});
    }, 25000);
});  

Answer 1

jQuery(function( $ ){             // DOM ready shorthand
    
    // ::: Fade Gallery: http://stackoverflow.com/a/18454450/383904
    var $gal = $("#gallery"),
        $img = $gal.find(">*"),
        n = $img.length,          // number of images
        c = 0,                    // counter
        itv;                      // loop interval       
   
    function anim(){ $img.fadeOut().eq( ++c % n ).stop().fadeIn(); }
    function loop(){ itv = setInterval(anim, 3000); }
    function stop(){ clearInterval( itv ); }
    
    $img.hide().eq(c).show();     // Begin with `c` indexed image
    $gal.hover( stop, loop );     // Pause gallery on hover
    loop();                       // START!
    
});

#gallery     { position:relative; }
#gallery img { position:absolute; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(Hover to pause gallery)<br>
<div id="gallery">
    <img src="//placehold.it/200x130/993/fff?text=1" />
    <img src="//placehold.it/200x130/379/fff?text=2" />
    <img src="//placehold.it/200x130/973/fff?text=3" />
    <img src="//placehold.it/200x130/739/fff?text=4" />
    <img src="//placehold.it/200x130/793/fff?text=5" />
</div>