如何在每個 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>