Die Beispiele in diesem Artikel teilen den Code für die Implementierung von JS nahtlosen Scrolling -Effekt für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Seamless Scroll </title> <style> #warp {width: 1200px; Höhe: 300px; Überlauf: versteckt; Rand: 100px Auto 0; } #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; Breite: 200px; Höhe: 300px; } </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> <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; Funktion scroll () {// scroll function box2.innerhtml = box1.innerhtml; Timer1 = setInterval (function () {x ++; if (x> = box1.clientwidth) {x = 0; Warp.Scrollleft = x;} Warp.Scrollleft = x;}, 10)} scroll (); carp.onmouseenter = function () {ClearInterval (Timer1); } carp.onmousEleave = function () {scroll (); } </script> </body> </html>Die Hauptidee dieses Effekts ist, dass die Breite des Inhaltsteils des Bildes viel größer sein sollte als die Breite des zu angezeigten Bereichs, so dass die Bildlaufleiste angezeigt wird. Kopieren Sie den Inhalt der vorherigen Gruppe von Bildern, um den Effekt nahtlosen Scrollen zu machen. Weitere Informationen finden Sie im Code.
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.