ตัวอย่างในบทความนี้แบ่งปันรหัสสำหรับการใช้เอฟเฟกต์การเลื่อนแบบไร้รอยต่อ JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll </title> <style> #warp {width: 1200px; ความสูง: 300px; ล้น: ซ่อน; มาร์จิ้น: 100px auto 0; } #warp #con {Width: 4000px; ความสูง: 300px; ล้น: ซ่อน; } #warp #con #box1 {float: left; ล้น: ซ่อน; } #warp #con #box2 {float: left; ล้น: ซ่อน; } #warp img {float: ซ้าย; ความกว้าง: 200px; ความสูง: 300px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "ภาพ/meinv1.jpg"> <img src = "meinv2.jpg"> <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "Box2"> </div> </div> </div> var con = document.getElementById ('con'); var box1 = document.getElementById ('box1'); var box2 = document.getElementById ('box2'); // box2.innerhtml = box1.innerhtml; var timer1 = null, x = 0; ฟังก์ชั่น SCROLL () {// ฟังก์ชั่นการเลื่อน BOX2.INNERHTML = BOX1.INNERHTML; timer1 = setInterval (ฟังก์ชัน () {x ++; ถ้า (x> = box1.clientWidth) {x = 0; warp.scrollleft = x;} warp.scrollleft = x;}, 10)} scroll (); warp.onMouseEnter = function () {clearInterval (timer1); } warp.onmouseleave = function () {scroll (); } </script> </body> </html>แนวคิดหลักของเอฟเฟกต์นี้คือความกว้างของส่วนเนื้อหาของภาพควรมีขนาดใหญ่กว่าความกว้างของพื้นที่ที่จะแสดงเพื่อให้แถบเลื่อนจะปรากฏขึ้น คัดลอกเนื้อหาของกลุ่มรูปภาพก่อนหน้าเพื่อให้การเลื่อนอย่างราบรื่นในเอฟเฟกต์ โปรดดูรหัสสำหรับรายละเอียด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น