如何使潜水的自动幻灯片放映停止时，目标链接到幻灯片之一被点击

Question

我有一个div幻灯片，它会自动循环播放，但我如何制作它，以便当我点击目标链接时，它会引导我到达那里并停止幻灯片的循环。此外，在几个周期后，幻灯片开始堵塞并聚集在一起，有人能帮助纠正这个错误吗？谢谢。

这是我当前的代码：

parent div {
    display: none;
    position: absolute;
}
#parent div:first-child {
    display: block;
}
#parent > div {
    width: 400px;
    height: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
    <script>
        function Divs() {
            var divs = $("#parent div"),
                now = divs.filter(":visible"),
                next = now.next().length ? now.next() : divs.first(),
                speed = 1000;
            now.fadeOut(speed);
            next.fadeIn(speed);
        }
        $(function () {
            setInterval(Divs, 1400);
        });
    </script>
    <div class="box" id="food">
        <h2>hi</h2>
    </div>
    <div class="box" id="infrastructure">
        <h2>bye</h2>
    </div>
    <div class="box" id="culture">
        <h2>hi</h2>
    </div>
    <div class="box" id="nature">
        <h2>bye</h2>
    </div>
</div>

Answer 1

如果将间隔设置为变量，则可以将事件侦听器指向父div，单击即可重置计时器。

这里有一个解决方案：

const interval= setInterval(divs, 1400)
const parentContainer = document.querySelector('#parent')
parentContainer.addEventListener('click', event => {
  clearInterval(interval)
  console.log(event.target.parentNode)
})
divs(interval)
function divs() {
              var divs= $('#parent div'),
                  now = divs.filter(':visible'),
                  next = now.next().length ? now.next() : divs.first(),
                  speed = 1000;
              now.fadeOut(speed);
              next.fadeIn(speed);
          }

#parent div {
  display: none;
  position: absolute;
}
#parent div:first-child {
  display: block;
}
#parent > div {
  width: 400px;
  height: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
  <div class='box' id='food'>
    <h2>food</h2>
  </div>
  <div class='box' id='infrastructure'>
    <h2>infrastructure</h2>
  </div>
  <div class='box' id='culture'>
    <h2>culture</h2>
  </div>
  <div class='box' id='nature'>
    <h2>nature</h2>
  </div>
</div>