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> </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 <-ul.OffSetWidth/2) {// El número negativo se debe a que la izquierda de UL es un número negativo oul.style.left = 0; } else 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 (temporizador); temporizador = setInterval (fnmove, 30); oUl.OnMouseOver = function () {ClearInterval (temporizador); }; oul.onmouseOut = function () {timer = setInterval (fnmove, 30); // ejecutar este temporizador cuando el mouse se mueva}; }; </script>Si hay algún error, corríjalos.
El código de implementación simple de desplazamiento sin costura anterior (recomendado) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.