บทความนี้แบ่งปันรหัสการใช้งานการเลื่อนแบบวนรอบที่ไร้รอยต่อ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. รูปแบบรูปภาพ: 260*400
2. ใช้ ตัวจับเวลาแบบวนซ้ำ เพื่อใช้งานได้อย่างง่ายดาย
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll </title> </head> <style type = "text/css"> .row {width: 1298px; ความสูง: 400px; ชายแดน: 1px ของแข็ง; Box-Shadow: 2px 2px 2px #000; ล้น: ซ่อน; } .Box {ตำแหน่ง: ญาติ; } .box1, .box2 {width: 1298px; ตำแหน่ง: สัมบูรณ์; } .box2 {ซ้าย: 1298px; } img {float: ซ้าย; } </style> <body> <div> <div id = "box"> <div id = "box1"> <img src = "images/1.jpg"> <img src = "images/2.jpg"> <img src = "ภาพ/3.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 = "ภาพ/5.jpg" 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 (สนุก 1); } </script> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน