Qualquer página da web que você abre basicamente verá imagens de rolagem perfeita ou carrossel, como Taobao e 360 Website Oficial Página inicial
Ao observar essas imagens de carrossel, você pode descobrir que as imagens podem ser alternadas para frente e para trás, então como você faz isso?
Existem duas maneiras principais de obter carrossel ou rolagem perfeita. Uma é exibir ou ocultar a imagem alterando a luz e a escuridão da imagem, ou seja, imagens transparentes, e a outra é exibir a imagem na área visível através de uma estrutura em movimento. Ambos os métodos usarão a mesma coisa, ou seja, o timer.
Existem dois tipos de temporizadores em JavaScript, 1.SetInterval (); 2.setTimeout (); Existem também dois métodos para fechar os temporizadores, ClearInterval () e ClearTimeout (). A diferença entre os dois temporizadores é que o primeiro pode ser executado várias vezes, enquanto o último pode ser executado apenas uma vez.
Desta vez, vou falar apenas sobre rolagem perfeita, e o próximo artigo apresenta a imagem do carrossel.
O código para implementar a rolagem simples simples é a seguinte:
/*Código completo* /<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <yoy> div {position: relativo; largura: 630px; altura: 220px; borda: sólido 2px preto; transbordamento: oculto;} ul {posição: absoluto; topo: 10px; esquerda: 0;} img {width: 200px; altura: 200px; float: esquerda; margem-direita: 10px; borda: 2px sólido amarelo;} li {estilo de lista: nenhum; margem: 0; preenchimento: 0;} ul {margem: 0; preenchimento: 0;} </style> <cript> window.onload = function () {var al = document.getElementById ("main"); var ali = omelementElementsByTagName ("); oinput = document.getElementsByTagName ("input") [0]; Oul.innerhtml+= Oul.innerhtml; Oul.style.width = Ali.length*Ali [0] .offsetWidth+"px"; var Timer = null; setInterval (function () {Ol.style.left = Oul.offsetLeft-8+"px"; if (Ol.OffSetLeft <-OUl.OffsetWidth/2) {}; id = "main"> <li> <img src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "/ img/2.jpg "> </li>> <mg src = "/ img/2.jpg"> </li>>> src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </div> </body> <//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
O layout de rolagem sem costura é relativamente simples. O seguinte explica principalmente o conteúdo JS:
Primeiro, obtenha UL e LI, respectivamente, copie o conteúdo em UL, modifique dinamicamente a largura de UL através de JS (se você deseja rolar perfeitamente para cima e para baixo, modificar sua largura) e, finalmente, ligue o cronômetro. No código, a UL move 8 pixels para a esquerda a cada 30 microssegundos e, quando a margem esquerda visível de UL é inferior à metade do comprimento total de UL, ele se torna 0. Como o computador corre muito rapidamente, essa mudança é quase impossível de sentir. Tudo o que vemos é a imagem constantemente se movendo para o movimento sem fim e sem fim.
O exposto acima é o código JS de rolagem contínuo introduzido pelo editor. Espero que seja útil para todos!