Los ejemplos en este artículo comparten el código para implementar el efecto de desplazamiento sin problemas JS para su referencia. El contenido específico es el siguiente
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> scroll sining </title> <style> #warp {width: 1200px; Altura: 300px; desbordamiento: oculto; Margen: 100px Auto 0; } #warp #con {ancho: 4000px; Altura: 300px; desbordamiento: oculto; } #warp #con #box1 {float: izquierda; desbordamiento: oculto; } #warp #con #box2 {float: izquierda; desbordamiento: oculto; } #warp img {float: izquierda; Ancho: 200px; Altura: 300px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "imágenes/meinv2.jpg"> <img src = "images/meinv3.jpg"> <img src = "meinv4.jpg4 <img src = "imágenes/meinv5.jpg"> <img src = "imágenes/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <script> var warp = document.getElementByid ('warp'); var con = document.getElementById ('Con'); var box1 = document.getElementById ('box1'); var box2 = document.getElementById ('box2'); // box2.innerhtml = box1.innerhtml; VAR TIMER1 = NULL, X = 0; function scroll () {// scroll functy box2.innerhtml = box1.innerhtml; timer1 = setInterval (function () {x ++; if (x> = box1.clientwidth) {x = 0; warp.scrollleft = x;} warp.scrollleft = x;}, 10)} scroll (); warp.onmouseEnter = function () {ClearInterval (Timer1); } warp.OnMouseLeave = function () {scroll (); } </script> </body> </html>La idea principal de este efecto es que el ancho de la parte del contenido de la imagen debe ser mucho más grande que el ancho del área que se exhibirá, de modo que aparecerá la barra de desplazamiento. Copie el contenido del grupo anterior de imágenes para que sea desplazamiento sin problemas en el efecto. Consulte el código para obtener más detalles.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.