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>Estoy tratando de hacer un clon de sitio web y una de las cosas que tengo que hacer es lo siguiente. Tengo muchos divs (cuadros) en una posición horizontal que puede desplazarse. Quiero que se desplace automáticamente en cada div (para saltar de un div al siguiente y al final repetirse) Entonces debería ser algo como div1 pausa.. div2 pausa.. etc.
¿Alguna idea de como hacerlo?
Aquí hay un ejemplo que está completamente comentado. Agregué algunos números a tu div para que puedas ver qué está pasando. Encontré una buena respuesta aquí https://stackoverflow.com/a/45388452/5604852 que luego adapté usando setInterval() para trabajar en la colección ( https://javascript.info/settimeout-setinterval#setinterval ).
El código está completamente comentado, por lo que debe ser explicativo.
// 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>