principio:
1. Dale a UL una posición absoluta para que se separe de la transmisión del documento, establezca a la izquierda en 0, meter la imagen en UL, escribir una función "en movimiento", la función de la función puede hacer que la izquierda de UL funcione hacia la derecha a una velocidad positiva,
2. Establezca un temporizador para que la función "en movimiento" ejecute cada 30 milisegundos (parámetros variables)
3. Debido a que la longitud de UL se "ejecutará", el contenido de UL, es decir, img, se puede duplicar.
oUl.innerhtml += oUl.innerhtml;
4. En este momento, debido a que el contenido de UL aumenta, su ancho también aumentará y el número de imágenes que se muestran puede cambiar o ser incierto de acuerdo con el proyecto real.
oul.style.width = oli.length*oli [0] .OffSetWidth+'Px';
5. Agregue código a la función "en movimiento".
5.1 En este momento, UL se mueve hacia la derecha. Cuando UL's offsetStetLett> 0, tire de la izquierda "mitad del ancho de UL", es decir, permite que UL se mueva hacia la derecha sin límite.
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetwidth/2+'px';}5.2 Cuando UL se mueve hacia la izquierda y su compensación corre la mitad del ancho de UL, tire de todo el UL hacia la izquierda inicial: 0;
if (oul.offsetleft <-ul.offsetWidth/2) {oUl.style.left = 0; }En el código:
HTML:
<div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg" /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> <li> <a href = "#"> <img src = "4.jpg"/> </a> </li> </ul> </div>
CSS:
* {margen: 0; relleno: 0;}#box {ancho: 480px; Altura: 110px; borde: 1px sólido rojo; Margen: 100px Auto; desbordamiento: oculto; Posición: relativo; } #box ul {posición: absoluto; Izquierda: 0; arriba: 5px;}#box ul li {list-style: none; flotante: izquierda; Ancho: 100px; Altura: 100px; ROLDE-LEFUNDA: 16px; } #box ul li img {ancho: 100px; Altura: 100px;}JS:
<script> window.onload = function () {var odiv = document.getElementById ('div1'); var oUl = odiv.getElementsByTagName ('ul') [0]; var oli = oUl.getElementsByTagName ('li'); var aa = document.getElementsByTagName ('a'); var ispeed = 10; // Deje que Ul tenga una velocidad para moverse oul.innerhtml += oUl.innerhtml; oul.style.width = oli.length*oli [0] .OffSetWidth+'Px'; aa [0] .OnClick = function () {ispeed = -10;}; aa [1] .OnClick = function () {ispeed = 10;}; function fnMove () {if (oUl.OffSetleft <-uSeS.OffSetWetWidth/2) {// El número negativo es porque el número de la izquierda es un número negativo. if (oul.offsetleft> 0) {oUl.style.left = -oul.offsetwidth/2+'px'; } oul.style.left = oUl.OffSetleft+ispeed+'px'; // todo el UL se mueve hacia la derecha}; var timer = null; ClearInterval (Timer); Timer = SetInterval (fnmove, 30); oUl.OnMouseOver = function () {ClearInterval (Timer);}; oUl.onMouseOut = function () {timer = setInterval (fnmove, 30); // Ejecutar este temporizador cuando el mouse se mueva};}; </script>Lo anterior son las ideas de desplazamiento sin costuras basadas en JS y el código compartido por el editor. Espero que pueda ayudarte. Si tiene alguna pregunta, déjame un mensaje. El editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin Network!