Efecto: mueva el mouse a la imagen y deje de desplazarse, y el mouse se desplaza automáticamente
Puede ajustar el desplazamiento hacia la dirección izquierda o derecha
La copia del código es la siguiente:
<style type = "text/css">
* {
margen: 0;
relleno: 0;
}
#Div1 {
desbordamiento: oculto;
Ancho: 712px;
Altura: 108px;
Margen: 100px Auto;
Posición: relativo;
Antecedentes: rojo;
}
#div1 ul {
Posición: Absoluto;
Izquierda: 0;
arriba: 0;
}
#div1 ul li {
flotante: izquierda;
Ancho: 178px;
Altura: 108px;
Estilo de lista: Ninguno;
}
</style>
La copia del código es la siguiente:
<Body>
<a href = "javascript :;"> caminar a la izquierda </a>
<a href = "javascript :;"> caminar a la derecha </a>
<div id = "div1">
<ul>
<li>
<img src = "img/scroll sin costura/1.jpg"/>
</li>
<li>
<img src = "img/scroll sin costura/2.jpg"/>
</li>
<li>
<img src = "img/scroll sin costura/3.jpg"/>
</li>
<li>
<img src = "img/scroll sin costura/4.jpg"/>
</li>
</ul>
</div>
</body>
Lo anterior es un diseño simple, y el siguiente es el código principal de JavaScript
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var oUl = odiv.getElementsBytagName ('ul') [0];
var ali = oUl.getElementsBytagName ('li');
velocidad var = 2;
oUl.innerhtml += oUl.innerhtml;
oul.style.width = ali [0] .OffsetWidth * ali.length + 'Px';
function Move () {
if (oul.offsetleft <-ul.offsetWidth / 2) {
oul.style.left = '0';
}
if (oul.offsetleft> 0) {
oul.style.left = -oul.OffSetWidth / 2 + 'Px';
}
oul.style.left = oUl.OffSetleft + Speed + 'Px';
}
VAR TIMER = SetInterval (moverse, 30);
odiv.onmouseover = function () {
ClearInterval (temporizador);
};
odiv.onmouseout = function () {
temporizador = setInterval (moverse, 30);
};
document.getElementsBytagName ('a') [0] .Onclick = function () {
velocidad = -2;
};
document.getElementsBytagName ('a') [1] .Onclick = function () {
velocidad = 2;
};
}
</script>
Permítanme explicar brevemente la idea:
Primero, establece UL. Hay 8 imágenes en total oul.innerhtml += oUl.innerhtml;
Calcule el ancho de UL al ancho real de Li*8
Ocultar el contenido adicional más tarde
NOTA: Oul.OffsetLeft es definitivamente negativo
Así que no te pierdas el signo negativo al hacer un juicio
La copia del código es la siguiente:
if (oul.offsetleft <-ul.offsetWidth / 2) {
oul.style.left = '0';
}
Esta sección significa que la imagen se desplaza a la mitad y retira rápidamente la imagen. Debido a que el programa se ejecuta demasiado rápido, es casi imposible ver el desplazamiento sin problemas.
Finalmente, use la velocidad variable para controlar el desplazamiento en las direcciones izquierda y derecha.
El código anterior solo implementa las funciones más básicas, y los amigos pueden continuar mejorando sobre esta base.