Question

我正在尝试使用页面加载上的fadeIn创建一个非常简单的基于jQuery的滑块。但是我第一次在脚本循环后遇到了问题。

这是我的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添加延迟。在第二个周期中，我再次循环播放幻灯片，其持续时间与总周期相同。

但是当间隔开始时出现问题，首先是间隙，然后是非常普遍的延迟。

基于Arun的小提琴：https://jsfiddle.net/h2jwqhom/2/

Answer 1

而不是尝试同步单独的间隔，它可能更容易滑动幻灯片。这可以通过在每次运行中获取下一张幻灯片来实现：

contentUrl

fiddle

作为旁注，如果让fadeout完全完成就可以了，你可以简单地做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 });而不是使用setTimeout，但我认为你的目标是过渡而不会完全淡出。

带有setInterval的jQuery滑块在页面加载时无法正常使用fadeIn

1 个答案: