Efeito: mova o mouse para a imagem e pare de rolar, e o mouse rola automaticamente
Pode ajustar a rolagem na direção esquerda ou direita
A cópia do código é a seguinte:
<style type = "text/css">
* {
margem: 0;
preenchimento: 0;
}
#div1 {
estouro: oculto;
Largura: 712px;
Altura: 108px;
margem: 100px automático;
Posição: relativa;
Antecedentes: vermelho;
}
#div1 ul {
Posição: Absoluto;
Esquerda: 0;
topo: 0;
}
#div1 ul li {
flutuar: esquerda;
Largura: 178px;
Altura: 108px;
estilo de lista: nenhum;
}
</style>
A cópia do código é a seguinte:
<Body>
<a href = "javascript :;"> Walk Left </a>
<a href = "javascript :;"> caminhe para a direita </a>
<div id = "div1">
<ul>
<li>
<img src = "img/scroll sem costura/1.jpg"/>
</li>
<li>
<img src = "img/scroll sem costura/2.jpg"/>
</li>
<li>
<img src = "img/scroll sem costura/3.jpg"/>
</li>
<li>
<img src = "img/scroll sem costura/4.jpg"/>
</li>
</ul>
</div>
</body>
O exposto acima é um layout simples, e o seguinte é o código JavaScript principal
A cópia do código é a seguinte:
<script type = "text/javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var oul = odiv.getElementsByTagName ('ul') [0];
var ali = Oul.getElementsByTagName ('li');
var velocidade = 2;
Oul.innerhtml += Oul.innerhtml;
Oul.style.width = Ali [0] .offsetWidth * Ali.Length + 'PX';
função move () {
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';
}
var timer = setInterval (move, 30);
odiv.onMouseOver = function () {
ClearInterval (timer);
};
odiv.onMouseOut = function () {
timer = setInterval (move, 30);
};
document.getElementsByTagName ('a') [0] .OnClick = function () {
velocidade = -2;
};
document.getElementsByTagName ('a') [1] .OnClick = function () {
velocidade = 2;
};
}
</script>
Deixe -me explicar brevemente a ideia:
Primeiro, defina ul. Existem 8 imagens no total de Oul.innerhtml += Oul.innerhtml;
Calcule a largura de UL para a largura real de Li*8
Esconda o conteúdo extra mais tarde
Nota: Ol.OffSetleft é definitivamente negativo
Portanto, não perca o sinal negativo ao fazer um julgamento
A cópia do código é a seguinte:
if (ol.offsetleft <-OUl.offsetWidth / 2) {
ol.style.left = '0';
}
Esta seção significa que a imagem está rolando no meio do caminho e puxe rapidamente a imagem para trás. Como o programa é executado muito rapidamente, é quase impossível ver a rolagem perfeita.
Por fim, use a velocidade variável para controlar a rolagem nas direções esquerda e direita.
O código acima implementa apenas as funções mais básicas, e os amigos podem continuar a melhorá -los com base nessa base.