L'exemple de cet article utilise JS pour réaliser le défilement d'image avec un effet de pause, contrôlé par les boutons, pour votre référence. Le contenu spécifique est le suivant
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Scroll sans couture 2 </title> <style> #warp {width: 1250px; hauteur: 300px; débordement: caché; marge: 100px auto 0; Overflow-X: Auto; } #warp #con {width: 4000px; hauteur: 300px; débordement: caché; } #warp #con # box1 {float: Left; débordement: caché; } #warp #con # box2 {float: gauche; débordement: caché; } #warp img {float: Left; marge-droite: 10px; Largeur: 200px; hauteur: 300px; } .btn {Text-Align: Centre; marge: 10px; } .bton .btn {Font-Size: 16px; } </ style> </ head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images / meinv1.jpg"> <img src = "images / meinv2.jpg"> <img src = "images / meinv3.jpg"> <img src = "images / meinv3" <img src = "images / meinv5.jpg"> <img src = "images / meinv6.jpg"> </ div> <div id = "box2"> </ div> </ div> </ div> <div> <Button Id = "Scroll"> << Scroll Left </ Button> <Button ID = "Scrollr"> Scroll droite >> 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, tempor2 = null, fage = 1; box2.innerhtml = box1.innerhtml; max = box1.clientwidth; imgmax = img.clientwidth + 10; fonction Scrollleft () {Flag = 1; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft ++; if (warp.scrollleft> = max) {warp.scrollleft = 0;} if (warp.scrollft% imgmax == 0) {ClearInterval (TIMER1); ClearTimeout (timer2); timer2 = settimeout (function () {{); TIMER1 = setInterval (Scrollleft, 5)}, 2000)}}, 5)} fonction ScrollRight () {Flag = 0; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft-- TIMER1 = SetInterval (ScrollRight, 5)}, 2000)}}, 5)} Scrollleft (); Scroll.OnClick = function () {// ClearInterval (TIMER1); // ClearTimeout (TIMER2); Scrollleft (); } scrollr.onclick = function () {// ClearInterval (TIMER1); // ClearTimeout (TIMER2); ScrollRight (); } warp.onmouseEsenter = function () {ClearInterval (TIMER1); ClearTimeout (TIMER2); } warp.onMouseLeave = function () {ClearInterval (TIMER1); ClearTimeout (TIMER2); console.log (Fage); if (flage) {scrollleft ();} else {ScrollRight ();}} </cript> </body> </html>L'effet spécifique de cet effet est de déplacer la souris vers le haut et de faire défiler, puis de faire défiler. Lors du défilement, c'est le défilement des images une par un, c'est-à-dire après avoir fait défiler une image pendant 2 secondes, arrêtez et commencez à faire défiler l'image suivante. Veuillez vous référer au code du contenu spécifique.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.