princípio:
1. Dê à UL uma posição absoluta para separá -lo do fluxo de documentos, definido para a esquerda para 0, encher a imagem em UL, escreva uma função "em movimento", a função pode fazer com que a esquerda da UL seja a direita a uma velocidade positiva,
2. Defina um timer para fazer a função "em movimento" executar a cada 30 milissegundos (parâmetros variáveis)
3. Como o comprimento da UL será "executado", o conteúdo de UL, ou seja, IMG, pode ser dobrado.
Oul.innerhtml += Oul.innerhtml;
4. Nesse momento, porque o conteúdo da UL aumenta, sua largura também aumentará e o número de imagens exibidas pode mudar ou ser incerto de acordo com o projeto real.
Oul.style.width = oli.length*oli [0] .offsetWidth+'px';
5. Adicione código à função "movendo".
5.1 Neste momento, a UL se move para a direita. Quando a UL está deslocada> 0, puxe a esquerda para a esquerda "Metade da largura de Ul", ou seja, permitir que a UL mova para a direita sem limite.
if (ol.offsetLeft> 0) {Ol.style.left = -Oul.offsetWidth/2+'px';}5.2 Quando a UL se move para a esquerda e seu deslocamento corre metade da largura do UL, puxe o UL inteiro de volta para a esquerda inicial: 0;
if (ol.offsetLeft <-OUl.OffSetWidth/2) {Oul.style.left = 0; }No código:
html:
<div id="box"><ul><li><a href="#"><img src="1.jpg" /></a></li><li><a href="#"><img src="2.jpg" /></a></li><li><a href="#"><img src="2.jpg" /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> <li> <a href = "#"> <img src = "4.jpg"/> </a> </li> </ul> </div>
CSS:
* {margem: 0; preenchimento: 0;}#caixa {width: 480px; Altura: 110px; borda: 1px vermelho sólido; margem: 100px automático; estouro: oculto; Posição: relativa; } #Box UL {Position: Absolute; Esquerda: 0; TOP: 5px;}#caixa ul li {estilo de lista: nenhum; flutuar: esquerda; Largura: 100px; Altura: 100px; Preparo-esquerda: 16px; } #box ul li img {width: 100px; Altura: 100px;}JS:
<Script> window.onload = function () {var odiv = document.getElementById ('div1'); var oul = odiv.getElementsByTagName ('ul') [0]; var oli = Ol.getElementsByTagName ('li'); // deixe ul, tenha uma velocidade para mover ol.innerhtml += Oul.innerhtml; Oul.style.width = oli.length*oli [0] .offsetWidth+'px'; aa [0] .OnClick = function () {iSpeed = -10;}; aa [1] .OnClick = function () {isPeed = 10;}; function fnmove () {if (ol.offsetleft <-OUl.OffSetWidth/2) {// O número negativo é o que o Ul é um esquerda, é um número negativo, é um número negativo do Ulfle. if (ol.OffSetLeft> 0) {Ol.style.left = -OUl.OffSetWidth/2+'px'; } Oul.style.left = Oul.OffSetLeft+ISPEED+'PX'; // Todo o UL se move para a direita}; var timer = null; clearInterval (timer); timer = setInterval (fnmove, 30); Oul.onMouseOver = function () {ClearInterval (Timer);}; Oul.onMouseOut = function () {Timer = setInterval (fnmove, 30); // execute este cronômetro quando o mouse é movido para longe};}; </sCript>O exposto acima são as idéias de rolagem contínua baseadas em JS e o código compartilhado pelo editor. Espero que possa ajudá -lo. Se você tiver alguma dúvida, deixe -me uma mensagem. O editor responderá a tempo. Muito obrigado pelo seu apoio ao site da Wulin Network!