El ejemplo en este artículo utiliza JS para lograr el desplazamiento de la imagen con efecto de pausa, controlado por botones, para su referencia. El contenido específico es el siguiente
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> scroll siningpless 2 </title> <style> #warp {width: 1250px; Altura: 300px; desbordamiento: oculto; Margen: 100px Auto 0; Overflow-x: auto; } #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; margen-derecha: 10px; Ancho: 200px; Altura: 300px; } .btn {text-align: Center; margen-top: 10px; } .Btn Button {font-size: 16px; } </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="images/meinv5.jpg"> <img src="images/meinv6.jpg"> </div> <div id="box2"></div> </div> </div> <div> <button id="scrollL"><<scroll left</button> <button id="scrollR">Scroll right>></button> </div> <script> var warp = document.getElementById ('warp'); var con = document.getElementById ('Con'); var box1 = document.getElementById ('box1'); var box2 = document.getElementById ('box2'); var img = box1.getElementsByTagName ('img') [0]; var scrolll = document.getElementById ('scrolll'); var scrollr = document.getElementById ('scrollr'); VAR TIMER1 = NULL, TIMER2 = NULL, FLAGE = 1; box2.innerhtml = box1.innerhtml; max = box1.clientwidth; imgmax = img.clientwidth+10; function scrollleft () {flag = 1; ClearInterval (temporizador1); timer1 = setInterval (function () {warp.scrollleft ++; if (warp.scrollleft> = max) {warp.scrollleft = 0;} if (warp.scrollleft%imgmax == 0) {clearval (temporizador1); cleartimeout (timer2); timer2 = setTimeout (function (function () {{{{{{{{ timer1 = setInterval (scrollleft, 5)}, 2000)}}, 5)} function scrollight () {flag = 0; ClearInterval (temporizador1); timer1 = setInterval (function () {warp.scrollleft--; if (warp.scrollleft <= 0) {warp.scrollleft = max;} if (warp.scrollleft%imgmax == 0) {clearval (temporizador1); cleartimeout (timer2); timer2 = setTimeout (function () {{{{{{ timer1 = setInterval (scrollight, 5)}, 2000)}}, 5)} scrollleft (); scrolll.onclick = function () {// clearInterval (Timer1); // ClearTimeOut (Timer2); scrollleft (); } scrollr.Onclick = function () {// clearInterval (timer1); // ClearTimeOut (Timer2); Scrollight (); } warp.onmouseenter = function () {clearInterval (Timer1); ClearTimeOut (Timer2); } warp.onMouseLeave = function () {ClearInterval (Timer1); ClearTimeOut (Timer2); console.log (flage); if (flage) {scrollleft ();} else {scrollright ();}} </script> </body> </html>El efecto específico de este efecto es mover el mouse hacia arriba y desplazarse, y luego desplazarse hacia afuera. Al desplazarse, es el desplazamiento de imágenes una por una, es decir, después de desplazar una imagen durante 2 segundos, detenerse y comenzar a desplazar la siguiente imagen. Consulte el código para obtener el contenido específico.
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.