獲取圖像滑塊以自動播放

我想讓自己的圖像滑塊以4000毫秒的間隔自動播放。我試過使用setTimeout，但我似乎無法得到它的工作。如果有人能幫助我，我將不勝感激。下面是例子滑塊：獲取圖像滑塊以自動播放

http://www.matthewruddy.com/slider-intervalissue/

任何想法如何，我可以得到它的自動播放？

這裏是jQuery代碼：

$(document).ready(function(){ 
    var images = $('.slider li'); 
    var slides = images.length; 
    var sliderwidth = 500; 
    var currentimage = 0; 
    var containerwidth = sliderwidth*slides; 
    var autoplay = 4000; 

    $('.slider').css('width', containerwidth); 

    $('#next').bind('click',nextimage); 

    function nextimage(){ 
     if(currentimage<slides-1){ 
      currentimage++; 
      $('.slider').animate({left:-sliderwidth*(currentimage)},{duration:800,easing:'easeInOutCubic'}); 
     } 
     else{ 
      currentimage = 0; 
      $('.slider').animate({left:0},{duration:800,easing:'easeInOutCubic'}) 
     } 
    }; 

});

感謝，馬修

來源

2010-08-16 Matthew Ruddy

我能夠設置一臺運行相當不錯，使用setTimeout和遞歸組合的自動播放。

我給了nextimage()函數一個參數autoplay，這是一個布爾值。然後，我添加了下面一行函數的末尾：

if (autoplay) { setTimeout(function() { nextimage(true); }, 4000); }

最後我說這條線在腳本的末尾，以獲得自動播放循環會：

setTimeout(function() { nextimage(true); }, 4000);

查看演示在這裏，主要由你提供的內容構建，並做了一些修改來完成自動播放：http://jsfiddle.net/bVjkP/

總之，你將一個布爾值傳遞給nextimage（）函數，告訴它是否開始自動播放。然後你只需調用一個初始的setTimeout來讓球滾動。這種方法的訣竅是你必須通過setTimeout調用一個匿名函數，setTimeout將autoplay設置爲true來調用nextimage函數，因爲在用setTimeout調用函數時不能傳遞參數。這與將函數綁定到諸如使用jQuery進行單擊或懸停等事件的方法類似。

來源

2010-08-16 22:22:57 Ender

謝謝！你的方法完美，但我仍然有點不明白（我喜歡理解事情，無論他們是否工作）。爲什麼你必須寫兩行？爲什麼不是第一行; > if（autoplay）{setTimeout（function（）{nextimage（true）;}，4000）; } 獲取自動運行嗎？ – 2010-08-16 23:13:00

該行只會在第一次調用該函數後每4秒保持一次（假設它是使用autoplay = true調用的）。首先你需要一些東西來啓動循環。想想它就像在樓梯的邊緣上貼緊一樣。它一旦啓動就會繼續運行，但你必須先給它一個初始的推動才能開始。 – Ender 2010-08-16 23:25:07

好吧，我明白了！太感謝了！ – 2010-08-17 00:57:31

獲取圖像滑塊以自動播放

回答

相關問題