Este exemplo compartilha a implementação do código JavaScript de efeito de rolagem contínuo para sua referência. O conteúdo específico é o seguinte]
Imagem de reprodução:
Código de implementação:
<! Doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz </titit> <yley> *{margem: 0; preenchimento: 0; } corpo {largura: 1000px; margem: 100px automático; Background-Color: #FFF; } #Wrapper {Overflow: Hidden; Largura: 600px; Altura: 100px; Posição: relativa; } #wrapper Ul {Position: Absolute; Esquerda: 0; topo: 0; } #wrapper li {float: esquerda; estilo de lista: nenhum; } #wrapper li img {width: 150px; Altura: 100px; Radio de fronteira: 9px; } input [type = Button] {margin-top: 20px; Largura: 35px; Altura: 25px; altura de linha: 25px; } </style> <script type = "text/javascript"> window.onload = function () {var timer = null; var velocidade = 4; var od = document.getElementById ("wrapper"); var au = od.getElementsByTagName ('ul') [0]; var ali = Au.getElementsByTagName ('li'); Au.innerhtml = au.innerhtml+au.innerhtml; Au.style.width = Ali [0] .offsetWidth*Ali.Length+'PX'; timer = setInterval (move, 30) função move () {if (au.offsetleft <-au.offsetWidth/2) {au.style.left = '0'; } if (Au.OffSetLeft> 0) {Au.style.left = -au.offsetWidth/2+'PX'; } au.style.left = Au.offsetleft+velocidade+'px'; } od.onMouseOver = function () {ClearInterval (Timer); } od.onmouseout = function () {timer = setInterval (move, 30)} document.getElementById ("btn1"). OnClick = function () {speed = -4; } document.getElementById ("btn2"). OnClick = function () {speed = 4; }} </script> </ad> <body> <div id = "wrapper"> <ul> <li> <img src = "img/pic4.jpg"/> </li> <li> <img src = "img/pic3.jpg"/</> <li> src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <input type = "buttão" "" "" "bt =" btn1 "value" left "/> <but) <but) <butt) <butt =" "" bt = "btn1"/"esquerd"/> <input)Você pode se referir aos seguintes tópicos para estudo:
"Resumo do efeito de rolagem JavaScript", "Resumo do Efeito de Rolagem JQuery", "Javascript Picture Carousel Effect Resumo"
O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam programação de JavaScript.