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> </div>
CSS:
* {margem: 0; preenchimento: 0;} #box {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;} #Box 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 = Oul.getElementsByTagName ('li'); var aa = document.getElementsByTagName ('a'); var ispeed = 10; // 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 é porque a esquerda da UL é um número negativo. } else 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 esse cronômetro quando o mouse for movido para longe}; }; </script>Se houver algum erro, corrija -os.
O código de implementação simples de rolagem perfeita acima (recomendado) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.