幻灯片自动启动（带切换）

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

你可以在一个单独的功能是它和$（文件）。就绪称为动画（）。然后，复选框功能可以根据检查的状态控制逻辑启动和停止动画。