javascript - 带有 setInterval 的 jQuery slider 无法在页面加载时使用 fadeIn 正常工作

Question

我正在尝试创建一个非常简单的基于 jQuery 的 slider ，并在页面加载时使用 fadeIn。但我在第一次之后的脚本循环方面遇到了问题。

这是我的 JavaScript 代码:

    function slideShow(isFirst) {
        if(isFirst) {
            $('#slider_img_1').delay(1500);
        }
        $('#slider_img_1').fadeIn(2000).delay(1000).fadeOut(2000); // 6500
        $('#slider_img_2').delay(5500).fadeIn(2000).delay(1000).fadeOut(2000); // 10500
        $('#slider_img_3').delay(9500).fadeIn(2000).delay(1000).fadeOut(2000); // 14500
    }

    $(document).ready(function() { 
        slideShow(true);
        setInterval("slideShow(false)",14500); 
    });

如您所见，我只是在第一个周期向 img_1 添加了延迟。在第二个周期中，我再次循环播放幻灯片，持续时间与总周期相同。

但是当间隔开始时就会出现问题，首先是有一个间隙，然后是非常广泛的延迟。

基于阿伦的 fiddle :https://jsfiddle.net/h2jwqhom/2/

Answer 1

与其尝试同步单独的时间间隔，不如逐张工作幻灯片可能更容易。这可以通过每次运行时获取下一张幻灯片来完成:

var sliders = $('.slider_img') //obtain slide collection
   , cur = 0; //indexer for slides

function slideShow() {    
    var $slider = $(sliders[cur++]); //get slide to show
    if(cur>=sliders.length) cur=0; //check if next slide is within bounds
    $slider.fadeIn(2000).delay(1000).fadeOut(2000); //animate
    setTimeout(slideShow,3500); //start next slide before fadeOut finishes
}

$(document).ready(function () {
    setTimeout(slideShow, 1500); //start slideshow after 1500 msecs    
});

fiddle

顺便说一句，如果可以让淡出完全完成，您只需执行 $slider.fadeIn(2000).delay(1000).fadeOut(2000, SlideShow); 而不是使用 setTimeout，但我认为你的目标是在不完全淡出的情况下进行过渡。