Question

因此。页面加载后，我希望滑块自动启动。但是选中复选框可以暂停它（然后恢复）

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

如何让它自动启动？

Answer 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/

编辑：我刚刚意识到你也想在一开始就让它开始。

让我们稍微修改一下，这样它只会在点击时最初移动：

$('#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});

另外，让我们检查＆＃34;＆＃34;超出html，否则它不会启动间隔而是清除它（因为它已被检查）。

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

新小提琴：

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

Answer 2

要自动启动滑块，您只需致电： $('#checkbox').trigger('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 3

您可以将动画放在一个单独的函数中，该函数使用$（document）.ready（）进行调用。然后，checkbox函数可以控制逻辑以根据检查状态启动和停止动画。

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

3 个答案: