El desplazamiento sin problemas es un efecto especial que a menudo se usa en proyectos. También hay muchos códigos de muestra en Internet. Aquí comparto con ustedes un código relativamente simple y práctico con buena compatibilidad. Por favor, estudíelo con cuidado.
Código HTML:
La copia del código es la siguiente:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "utf-8">
<</span> title> scroll sining </</span> title>
<</span> script src = "js/0010.js"> </</span> script>
<</span> link rel = "stylesheet" type = "text/css" href = "css/0010.css"/>
</</span> head>
<</span> cuerpo>
<</span> a href = "javaScript:"> walk a la izquierda </</span> a>
<</span> a href = "javascript:"> caminar a la derecha </</span> a>
<</span> div id = "div1">
<</span> ul>
<</span> li> <</span> img src = "image/1.jpg"> </</span> li>
<</span> li> <</span> img src = "image/2.jpg"> </</span> li>
<</span> li> <</span> img src = "image/3.jpg"> </</span> li>
<</span> li> <</span> img src = "image/4.jpg"> </</span> li>
</</span> ul>
</</span> div>
</</span> cuerpo>
</</span> html>
Código CSS
La copia del código es la siguiente:
*{
margen: 0;
relleno: 0;
}
#Div1 {
desbordamiento: oculto;
fondo: azul;
Posición: relativo;
Ancho: 600px;
Altura: 150px;
Margen: 100px Auto;
}
#div1 ul {
Posición: Absoluto;
Izquierda: 0px;
arriba: 0px;
Estilo de lista: Ninguno;
}
#div1 ul li {
flotante: izquierda;
}
#div1 ul li img {
Ancho: 150px;
Altura: 150px;
}
JS: Código
La copia del código es la siguiente:
window.onload = function () {
var odiv = document.getElementById ('div1');
var oUl = odiv.getElementsBytagName ('ul') [0];
var ali = oUl.getElementsBytagName ('li');
VAR TIMER = NULL;
Vel Speed = 2; // Controle la velocidad y la dirección de desplazamiento
oUl.innerhtml = oUl.innerhtml+oUl.innerhtml;
oul.style.width = ali [0] .OffsetWidth*ali.length+'Px';
temporizador = setInterval (moverse, 30);
odiv.onmouseover = function () {// mouse en tentativo
ClearInterval (temporizador);
};
odiv.onmouseout = function () {// mouse fuera y continúa desplazando
temporizador = setInterval (moverse, 30);
}
document.getElementsBytagName ('a') [0] .Onclick = function () {
velocidad = -2;
}
document.getElementsBytagName ('a') [1] .Onclick = function () {
velocidad = 2;
}
Función Move () {// Pagado de desplazamiento
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';
}
}
¿No es muy bueno el efecto?