Este ejemplo comparte la implementación del código JavaScript de efecto de desplazamiento sin problemas para su referencia. El contenido específico es el siguiente]
Imagen de reproducción:
Código de implementación:
<! DocType html> <html> <head> <meta charset = "gb2312" /> <title> zzzz </title> <style> *{margin: 0; relleno: 0; } cuerpo {ancho: 1000px; Margen: 100px Auto; Color de fondo: #fff; } #wrapper {desbordamiento: oculto; Ancho: 600px; Altura: 100px; Posición: relativo; } #wrapper ul {posición: absoluto; Izquierda: 0; arriba: 0; } #wrapper li {float: izquierda; Estilo de lista: Ninguno; } #wrapper li img {ancho: 150px; Altura: 100px; Border-Radius: 9px; } input [type = button] {margin-top: 20px; Ancho: 35px; Altura: 25px; Línea de altura: 25px; } </style> <script type = "text/javaScript"> window.onload = function () {var timer = null; velocidad var = 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) Función 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+velocidad+'px'; } od.onmouseover = function () {clearInterval (temporizador); } od.onmouseOut = function () {timer = setInterval (Move, 30)} document.getElementById ("BTN1"). OnClick = function () {Speed = -4; } document.getElementById ("btn2"). onClick = function () {speed = 4; } } </script> </head> <body> <div id="wrapper"> <ul> <li><img src="img/pic4.jpg"/></li> <li><img src="img/pic3.jpg"/></li> <li><img src="img/pic2.jpg"/></li> <li><img src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <input type = "botón" name = "" id = "btn1" value = "izquierda"/> <input type = "button" id = "btn2" value = "derecha"/> <cuerpo> <///////>/> <input type = "button" id = "btn2" Valor = "Right"/<> <body </bullPuede consultar los siguientes temas para el estudio:
"Resumen del efecto de desplazamiento de JavaScript", "Resumen del efecto de desplazamiento jQuery", "JavaScript Picture Carousel Effect Summary"
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de JavaScript.