如何无限循环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> 

Answer 2

在函数中执行一个循环。 让函数在setTimeout之后调用自己。 它应该永远运行。 您可能需要一些数组逻辑来循环遍历图片。 像这样的东西：

function go(i) {
  setTimeout(function(){
    $('#img'+i).fadeOut(5000);
    if (i<6) i=1;    
    else i++;
    go(i);
  },5000);
}
go(1);

Answer 3

这样做的一种方法可以通过标准的javascript来解决，并且正如ntgCleaner通过setInterval(function, time)函数在注释中建议的那样。

在伪代码中，人们可以这样表达：

function wrapper() {
   allYourCode()
}

setInterval(wrapper, 90000) // running the function wrapper every 1,5 minute.

Answer 4

我喜欢runfaj的解决方案，但是为了完成，这里是一个setInterval（..）解决方案。 当setInterval超时应该执行时，使用setTimeout正确同步。 带有jsfiddle的示例代码段：

var singleImageDisplayTime = 5000;
var completeLoopTime = 5 * singleImageDisplayTime;

function fadeInFunction(jquerySelector) {
    $(jquerySelector).fadeIn("slow", function () {});
}
function fadeOutFunction(jquerySelector) {
    $(jquerySelector).fadeOut("slow", function () {});
}
...
setTimeout(function () {
    fadeInFunction("#img1");
    setInterval(function() { fadeInFunction("#img1"); }, completeLoopTime);
}, 5 * singleImageDisplayTime);
setTimeout(function () {
    fadeOutFunction("#img1");
    setInterval(function() { fadeOutFunction("#img1"); }, completeLoopTime);
}, 1 * singleImageDisplayTime);
...