Dieser Artikel teilt den Implementierungscode von JS Seamless Loop Scrolling für Ihre Referenz. Der spezifische Inhalt ist wie folgt
1. Bildformat: 260*400.
2. Verwenden Sie einen Schleifen -Timer , um es einfach zu implementieren
<! docType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Seamless Scroll </title> </head> <style type = "text/css"> .row {width: 1298px; Höhe: 400px; Grenze: 1px fest; Box-Shadow: 2px 2px 2px #000; Überlauf: versteckt; } .box {Position: relativ; } .box1, .box2 {width: 1298px; Position: absolut; } .box2 {links: 1298px; } img {float: links; } </style> <body> <div> <div id = "box"> <div id = "box1"> <img src = "bilder/1.jpg"> <img src = "bilder/2.jpg"> <img Src = "Bilder/3.jpg"> <img Src = "Bilder/4.JPG"> <img Src id="box2"> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> </div> </div> </div> </div></body><script type = "text/javaScript"> window.onload = function () {var _box1 = document.getElementById ("box1"); var _box2 = document.getElementById ("box2"); var x = 0; var fun = function () {_box1.style.left = x + 'px'; _box2.Style.left = (x +1298) + 'px'; X--; if ((x +1298) == 0) {x = 0; }} setInterval (Fun, 1); } </script> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.