如何在每个 div 上暂停自动滚动（水平）？

Question

 setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 }, 5000); }, 4000); return scroll; }(), 9000);

 .auto_scroll_top { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; margin-top: 1.2rem; }.auto_scroll_top.box_auto { display: inline-block; min-width: 400px; height: 200px; background-color: orange; border-radius: 10px; margin: 0 5px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="auto_scroll_top"> <div class="box_auto"></div> <div class="box_auto"></div> <div class="box_auto"></div> <div class="box_auto"></div> </div>

我正在尝试制作一个网站克隆，我必须做的事情之一如下。 我在水平 position 中有许多 div（框），您可以滚动它们。我希望它在每个 div 上自动滚动（从一个 div 跳到下一个 div，最后重复自身）所以它应该像 div1暂停.. div2 暂停.. 等等

任何想法如何去做？

Answer 1

这是一个完整注释的示例。 我在你的 div 中添加了一些数字，这样你就可以看到发生了什么。 我在这里找到了一个很好的答案https://stackoverflow.com/a/45388452/5604852然后我使用setInterval()对其进行了调整以处理整个集合（ https://javascript.info/settimeout-setinterval#setinterval ）。

该代码已完全注释，因此应该是解释性的。

---

 // Starting index let auto_index = 0; // Total number of divs let total = document.getElementsByClassName('box_auto').length; // Set interval let timerId = setInterval( function() { // Increase index auto_index = auto_index + 1 // Check if index is above total if (auto_index > total - 1 ) { // Reset if it is auto_index = 0; } scrollTo(auto_index); }, 2000); // 2000 = 2 seconds // Adapted from this answer: // https://stackoverflow.com/a/45388452/5604852 // Using.scrollIntoView // Adding smooth and center for design reasons function scrollTo(item) { document.getElementsByClassName('box_auto')[item].scrollIntoView({ behavior: 'smooth', block: 'center' }); };

 .auto_scroll_top{ overflow-x: scroll; overflow-y: hidden; white-space: nowrap; margin-top: 1.2rem; }.box_auto{ display:inline-block; min-width:300px; height:200px; background-color: orange; border-radius: 10px; margin:0 5px; }.box_auto { font-size: 150px; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="auto_scroll_top"> <div class="box_auto">1</div> <div class="box_auto">2</div> <div class="box_auto">3</div> <div class="box_auto">4</div> </div>