2014-11-17 119 views

回答

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/

+0

非常感謝!對此,我真的非常感激! – Joel

1

這是我會怎麼做:

$('#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/

+0

非常感謝你! – Joel

0

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