jQuery滑塊與setInterval無法正常工作fadeIn在頁面加載

我想創建一個非常簡單的基於jQuery的頁面加載fadeIn滑塊。但是我第一次在腳本的循環方面遇到問題。jQuery滑塊與setInterval無法正常工作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第一個週期。在第二個循環中，我再次循環播放幻燈片，其播放時間與整個循環的時間相同。

但是當間隔開始時出現問題，首先出現間隙，然後非常普遍的延遲。

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

來源

2015-07-21 JavaCake

你可以創建一個問題小提琴嗎？ –

https://jsfiddle.net/arunpjohny/h2jwqhom/1/？ –

我有@位置ArunPJohny的例子，這正是我所做的。 – JavaCake

而不是試圖同步分離間隔，它可能更容易通過幻燈片工作幻燈片。這可以通過讓每個運行下一張幻燈片來完成：

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，但我估計你的目標是轉換而不會完全消失。

來源

2015-07-21 08:31:01

jQuery滑塊與setInterval無法正常工作fadeIn在頁面加載

回答

相關問題