A rolagem sem costura é um efeito especial que é frequentemente usado em projetos. Existem também muitos códigos de amostra na Internet. Aqui eu compartilho com você um código relativamente simples e prático com boa compatibilidade. Por favor, estude -o com cuidado.
Código HTML:
A cópia do código é a seguinte:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "utf-8">
<</span> título> rolagem sem costura </</span> title>
<</span> script src = "js/0010.js"> </</span> script>
<</span> link rel = "Stylesheet" type = "text/css" href = "css/0010.css"/>
</span> head>
<</span> corpo>
<</span> a href = "javascript:"> Walk Left </span> a>
<</span> a href = "javascript:"> Walk Right </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>l>
</span> div>
</span> corpo>
</</span> html>
Código CSS
A cópia do código é a seguinte:
*{
margem: 0;
preenchimento: 0;
}
#div1 {
estouro: oculto;
Antecedentes: azul;
Posição: relativa;
Largura: 600px;
Altura: 150px;
margem: 100px automático;
}
#div1 ul {
Posição: Absoluto;
Esquerda: 0px;
Top: 0px;
estilo de lista: nenhum;
}
#div1 ul li {
flutuar: esquerda;
}
#div1 ul li img {
Largura: 150px;
Altura: 150px;
}
JS: Código
A cópia do código é a seguinte:
window.onload = function () {
var odiv = document.getElementById ('div1');
var oul = odiv.getElementsByTagName ('ul') [0];
var ali = Oul.getElementsByTagName ('li');
Var Timer = NULL;
var velocidade = 2; // Controle a velocidade e a direção de rolagem
Oul.innerhtml = Oul.innerhtml+Oul.innerhtml;
Oul.style.width = Ali [0] .offsetWidth*Ali.Length+'PX';
timer = setInterval (move, 30);
odiv.onMouseOver = function () {// Mouse in Tentative
ClearInterval (timer);
};
odiv.onmouseout = function () {// mouse para fora e continue rolando
timer = setInterval (move, 30);
}
document.getElementsByTagName ('a') [0] .OnClick = function () {
velocidade = -2;
}
document.getElementsByTagName ('a') [1] .OnClick = function () {
velocidade = 2;
}
função move () {// rolagem de imagem
if (ol.offsetleft <-OUl.offsetWidth/2) {
ol.style.left = 0;
}
if (ol.offsetleft> 0) {
ol.style.left = -OUl.OffSetWidth/2+'PX';
}
Oul.style.left = Oul.OffSetLeft+Speed+'Px';
}
}
O efeito não é muito bom?