Cualquier página web que abra básicamente verá imágenes de desplazamiento sin interrupciones o carrusel, como Taobao y 360 Página de inicio del sitio web oficial
Al observar estas imágenes de carrusel, puede encontrar que las imágenes se pueden cambiar de un lado a otro, entonces, ¿cómo lo haces?
Hay dos formas principales de lograr el carrusel o el desplazamiento sin problemas. Una es mostrar u ocultar la imagen cambiando la luz y la oscuridad de la imagen, es decir, imágenes transparentes, y la otra es mostrar la imagen en el área visible a través de un marco móvil. Ambos métodos usarán lo mismo, es decir, el temporizador.
Hay dos tipos de temporizadores en JavaScript, 1.setInterval (); 2.setTimeOut (); También hay dos métodos para cerrar temporizadores, ClearInterval () y ClearTimeOut (). La diferencia entre los dos temporizadores es que el primero se puede ejecutar varias veces, mientras que el segundo solo puede ejecutarse una vez.
Esta vez solo hablaré sobre el desplazamiento sin problemas, y el próximo artículo presenta la imagen del carrusel.
El código para implementar el desplazamiento simple sin costuras es el siguiente:
/*Código completo* /<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8" /> <style> div {posición: relativo; ancho: 630px; altura: 220px; borde: sólido 2px negro; desbordamiento: oculto;} ul {posición: absoluto; superior: 10px; izquierda: 0;} img {ancho: 200px; altura: 200px; float: izquierda; margen-derecha: 10px; borde: 2px SOLC amarillo;} li {list-style: none; margen: 0; relleno: 0;} ul {margin: 0; relleno: 0;} </style> <script> window.onload = function () {var oUl = document.getElementById ("main"); var aLi = oUl.getElementsByTagName ("img"); var a oinput = document.getElementsByTagName ("input") [0]; oUl.innerhtml+= oUl.innerhtml; oUl.style.width = ali.length*ali [0] .OffSetWidth+"PX"; timer = null; setInterVal (function () {oUl.style.left = oUl.OffSetleft-8+"px"; if (oUl.OffSetLeft <-ul.OffSetWidth/2) {oUl.Style.left = "0px";}}}, 30);}; </script> </head> <boder> src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/3.jpg"> </li> <li> <img src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </div> </body> </html>/-------------------------------------------------------------------------------------------
El diseño de desplazamiento sin problemas es relativamente simple. Lo siguiente explica principalmente el contenido JS:
Primero, obtenga UL y Li respectivamente, luego copie el contenido en UL, modifique dinámicamente el ancho de UL a través de JS (si desea desplazarse hacia arriba y hacia abajo, modificar su ancho) y finalmente encender el temporizador. En el código, UL mueve 8 píxeles a la izquierda cada 30 microsegundos, y cuando el margen visible izquierdo de UL es menos de la mitad de la longitud total de UL, se convierte en 0. Debido a que la computadora funciona muy rápidamente, este cambio es casi imposible de sentir. Todo lo que vemos es que la imagen se mueve constantemente hacia la izquierda, el movimiento interminable.
Lo anterior es el código JS de desplazamiento sin interrupciones introducido por el editor. ¡Espero que sea útil para todos!