Das Beispiel in diesem Artikel verwendet JS, um eine Bildscrollen mit Pause -Effekt zu erzielen, die von Schaltflächen gesteuert werden, für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Seamless Scroll 2 </title> <style> #warp {width: 1250px; Höhe: 300px; Überlauf: versteckt; Rand: 100px Auto 0; Überlauf-X: Auto; } #warp #con {width: 4000px; Höhe: 300px; Überlauf: versteckt; } #warp #con #box1 {float: links; Überlauf: versteckt; } #warp #con #box2 {float: links; Überlauf: versteckt; } #warp img {float: links; Rand-Rechts: 10px; Breite: 200px; Höhe: 300px; } .BTN {text-align: center; Rand: 10px; } .BTN-Schaltfläche {Schriftgröße: 16px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "bilder/meinv1.jpg"> <img src = "Bilder/meinv2.jpg"> <img Src = "Bilder/minv3.jpg"> <img Src = "muinv3.jpg"> <img Src = "muinv3.jpg"> <img. " <img src = "Bilder/meinv5.jpg"> <img src = "Bilder/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <div> <button id = "scrolll"> << scroll </buttht </buttht = buttht = "scrollr" 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; Funktion ScrollLeft () {Flag = 1; ClearInterval (Timer1); timer1 = setInterval (function () {carp.scrollleft ++; if (carp.scrollleft> = max) {warp.scrollleft = 0;} if (Warp.scrollleft%IMGMAX == 0) {Clearinterval (Timer1); timer1 = setInterval (scrollleft, 5)}, 2000)}}, 5)} Funktion Scrollright () {flag = 0; ClearInterval (Timer1); Timer1 = setInterval (function () {carp.scrollleft-; if (carp.scrollleft <= 0) {Warp.scrollleft = max;} if (carp.scrollleft%IMGMAX == 0) {ClearInterval (Timer1); Timer1 = setInterval (scrollright, 5)}, 2000)}}, 5)} scrollLeft (); scrolll.onclick = function () {// ClearInterval (Timer1); // Clearimeout (Timer2); scrollleft (); } scrollr.onclick = function () {// ClearInterval (Timer1); // Clearimeout (Timer2); scrollright (); } carp.onmouseenter = function () {ClearInterval (Timer1); Clearimeout (Timer2); } carp.onmousEleave = function () {ClearInterval (Timer1); Clearimeout (Timer2); console.log (Flage); if (flage) {scrollleft ();} else {scrollright ();}} </script> </body> </html>Der spezifische Effekt dieses Effekts besteht darin, die Maus nach oben zu bewegen und zu scrollen und dann herauszufordern. Beim Scrollen ist es das Scrollen von Bildern nacheinander, dh nach dem Scrollen eines Bildes für 2 Sekunden stehen Sie an und beginnen Sie, das nächste Bild zu scrollen. Weitere Informationen finden Sie im Code für den spezifischen Inhalt.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.