หลักการ:
1. ให้ตำแหน่ง UL ที่แน่นอนเพื่อแยกออกจากสตรีมเอกสารตั้งค่าซ้ายเป็น 0 ใส่ภาพลงใน UL เขียนฟังก์ชั่น "การเคลื่อนไหว" ฟังก์ชั่นฟังก์ชั่นสามารถทำให้การวิ่งซ้ายของ UL ไปทางขวาด้วยความเร็วบวก
2. ตั้งค่าตัวจับเวลาเพื่อให้ฟังก์ชั่น "เคลื่อนที่" ดำเนินการทุก ๆ 30 มิลลิวินาที (พารามิเตอร์ตัวแปร)
3. เนื่องจากความยาวของ UL จะเป็น "เรียกใช้" เนื้อหาของ UL นั่นคือ IMG สามารถเพิ่มเป็นสองเท่า
OUL.InnerHtml += OUL.InnerHtml;
4. ในเวลานี้เนื่องจากเนื้อหาของ UL เพิ่มขึ้นความกว้างของมันจะเพิ่มขึ้นและจำนวนรูปภาพที่แสดงอาจเปลี่ยนแปลงหรือไม่แน่นอนตามโครงการจริง
oul.style.width = oli.length*oli [0] .offsetWidth+'px';
5. เพิ่มรหัสลงในฟังก์ชั่น "ย้าย"
5.1 ในเวลานี้ UL ย้ายไปทางขวา เมื่อ Offsetleft ของ UL> 0, ดึง UL ไปทางซ้าย "ครึ่งความกว้างของ UL" นั่นคือทำให้ UL สามารถย้ายไปทางขวาโดยไม่ จำกัด
if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px';}5.2 เมื่อ UL เคลื่อนที่ไปทางซ้ายและ Offsetleft วิ่งครึ่งหนึ่งของความกว้างของ UL ดึง UL ทั้งหมดกลับไปทางซ้ายเริ่มต้น: 0;
if (oul.offsetleft <-oul.offsetWidth/2) {oul.style.left = 0; -บนรหัส:
html:
<div id = "box"> <ul> <li> <a href = "#"> <img src = "1.jpg"/> </a> </li> <li> <a href = "#"> <img src = "2.jpg"/> </a> </li> /> </a> </li> <li> <a href = "#"> <img src = "3.jpg"/> </a> </li> <li> <a href = "#"> <img src = "4.jpg"/> </a> </li>
CSS:
* {มาร์จิ้น: 0; padding: 0;}#box {width: 480px; ความสูง: 110px; เส้นขอบ: 1px สีแดงของแข็ง; มาร์จิ้น: 100px auto; ล้น: ซ่อน; ตำแหน่ง: ญาติ; } #box ul {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 5px;}#box ul li {list-style: none; ลอย: ซ้าย; ความกว้าง: 100px; ความสูง: 100px; Padding-Left: 16px; } #box ul li img {width: 100px; ความสูง: 100px;}JS:
<script> window.onload = function () {var odiv = document.getElementById ('div1'); var oul = odiv.getElementsByTagname ('ul') [0]; var oli = oul.getElementsByTagname ('li'); // let ul มีความเร็วในการย้าย oul.innerhtml += oul.innerhtml; oul.style.width = oli.length*oli [0] .offsetWidth+'px'; aa [0] .onclick = function () {ispeed = -10;}; aa [1] .onclick = function () {ispeed = 10;}; ฟังก์ชั่น fnmove () {ถ้า (oul.offsetleft <-oul.offsetWidth/2) {// จำนวนลบ if (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // UL ทั้งหมดย้ายไปทางขวา}; var timer = null; ClearInterval (ตัวจับเวลา); timer = setInterval (fnmove, 30); oul.onmouseover = function () {clearinterval (ตัวจับเวลา);}; oul.onmouseout = function () {timer = setInterval (fnmove, 30); // เรียกใช้ตัวจับเวลานี้เมื่อเมาส์ถูกย้ายออกไป};}; </script>ข้างต้นเป็นแนวคิดการเลื่อนแบบไร้รอยต่อของ JS และรหัสที่ใช้ร่วมกันโดยบรรณาธิการ ฉันหวังว่ามันจะช่วยคุณได้ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin Network!