Question

我正在照相馆上，我想添加自动幻灯片功能，但似乎无法弄清楚。

到目前为止，这是我的代码：https://codepen.io/reardgjoni/pen/VBBKZq （从Js文件的105行开始）

        <div class="arrows">
        <div id="arrow-left" class="arrow">
            <i class="fas fa-angle-left"></i>
         </div>

         <div class="checkbox">
            <input type="checkbox"></input>
         </div>

        <div id="arrow-right" class="arrow">
            <i class="fas fa-angle-right"></i>
        </div>
        </div>

Answer 1

如果选中了复选框，则可以setInterval触发arrowRight的点击事件。

将id="autoplay"分配给复选框。

然后将这些代码添加到第105行并对其进行测试：

var autoplay;
document.querySelector('#autoplay').onclick = function() {
  if (this.checked) {
    autoplay = setInterval(function() {
      arrowRight.click();
    }, 2000);
  } else {
    clearInterval(autoplay);
  }
}

Answer 2

您的问题在以下代码行中：

var checkBox = document.querySelector('.checkbox');

通过这种方式，您可以选择div而不是复选框输入字段。将该行更改为：

var checkBox = document.querySelector('[type=checkbox]');

您更新的codepen

如果单击了复选框，则自动滑动

2 个答案: