幻燈片自動啓動（帶切換）

Question

http://jsfiddle.net/r6uf38v4/

所以。頁面加載完成後，我希望滑塊自動啓動。但用複選框可以暫停它（然後繼續）

$('#checkbox').change(function(){ 
    setInterval(function() { 
     moveRight(); 
    }, 3000); 

如何使它自動啓動？

Answer 1

用於啓動滑塊自動您只需要撥打： $('#checkbox').trigger('change'); 這會觸發change事件，並啓動滑塊。

暫停和恢復你可以使用這樣的事情：

var moveInterval; 


$('#checkbox').change(function() { 
    if (!moveInterval) { 
     moveInterval = setInterval(function() { 
      moveRight(); 
     }, 3000); 
    } else { 
     clearInterval(moveInterval); 
     moveInterval = false; 
    } 
}); 

每次如果moveInterval定義的改變事件被觸發檢查。如果不是，請定義它。如果是，清除它並將其設置爲false。

更新您的小提琴：http://jsfiddle.net/r6uf38v4/1/

Answer 2

這是我會怎麼做：

$('#checkbox').change(function(){ 
    if(!$(this).prop('checked')){ 
     moveRight(); 
$(this).data('slideshow', setInterval(function() { 
    moveRight(); 
}, 3000)); 
    } else { 
     clearInterval($(this).data('slideshow')); 
    } 
}); 

首先，它會檢查，如果該複選框未選中。如果未選中，則先調用moveRight，然後啓動間隔。將其存儲在元素中，以便下次點擊它（將被檢查），您可以清除它，停止幻燈片放映。

小提琴：

http://jsfiddle.net/r6uf38v4/2/

編輯：我只是意識到你也想讓它從頭開始。

讓我們修改了一點，所以它只會點擊它時，最初MoveRight的：

$('#checkbox').on('change', function(ev, load){ 
    var load = load === undefined ? false : true; 
    if(!$(this).prop('checked')){ 
     if(!load) { moveRight(); } 
$(this).data('slideshow', setInterval(function() { 
    moveRight(); 
}, 3000)); 
    } else { 
     clearInterval($(this).data('slideshow')); 
    } 
}); 

我增加了一個額外的參數，所以如果它的負載，也不會MoveRight的開始。然後你只需觸發功能：

$('#checkbox').trigger('change', {load : true}); 

而且，讓我們「查」出來的HTML，否則將無法啓動間隔，但它清楚（因爲它選中）。

<input type="checkbox" id="checkbox"> 

新小提琴：

http://jsfiddle.net/r6uf38v4/3/

Answer 3

你可以在一個單獨的功能是它和$（文件）。就緒稱爲動畫（）。然後，複選框功能可以根據檢查的狀態控制邏輯啓動和停止動畫。