Bien, en mi sitio web tengo tres imágenes panorámicas largas una encima de la otra. Quiero que todos se desplacen 100 px hacia la izquierda cada segundo. Esto es lo que probé:
var panoramas = document.getElementsByClassName("pano"); setInterval(scoot, 1000); function scoot(){ for (i=0; i < panoramas.length; i++){ panoramas[i].style.left = panoramas[i].style.left - 100; } }Pero lo que sucede es que se deslizan 100 px hacia la izquierda una vez y se detienen. Probé algunos console.logs allí, así que sé que está en bucle, pero no se moverán más de una vez.
panoramas[i].style.left no lee estilos de archivos CSS. Devuelve una cadena con unidad y espera una cadena con unidad.
var panoramas = document.getElementsByClassName("pano"); setInterval(scoot, 1000); function scoot() { for (i = 0; i < panoramas.length; i++) { panoramas[i].style.left = panoramas[i].style.left.replace(/\d+/, p1 => +p1 - 100); } } .pano { display: block; width: 50px; height: 50px; background-color: blue; position: absolute; } <div class="pano" style="left: 200px; top: 50px;"></div> <div class="pano" style="left: 250px; top: 100px;"></div> <div class="pano" style="left: 300px; top= 150px;"></div>