รหัสการใช้งานอย่างง่ายสำหรับการเลื่อนอย่างราบรื่น (แนะนำ)

หลักการ:

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> </div>

CSS:

 * {margin: 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'); var aa = document.getElementsByTagname ('a'); var ispeed = 10; // 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 () {if (oul.offsetleft <-oul.offsetWidth/2) {// จำนวนลบเป็นเพราะ ul's ซ้ายเป็นจำนวนลบ oul.style.left = 0; } อื่นถ้า (oul.offsetleft> 0) {oul.style.left = -oul.offsetWidth/2+'px'; } oul.style.left = oul.offsetleft+ispeed+'px'; // UL ทั้งหมดย้ายไปทางขวา}; ตัวจับเวลา var = null; ClearInterval (ตัวจับเวลา); timer = setInterval (fnmove, 30); oul.onmouseover = function () {clearInterval (ตัวจับเวลา); - oul.onMouseOut = function () {timer = setInterval (fnmove, 30); // ดำเนินการจับเวลานี้เมื่อเมาส์ถูกย้ายออกไป}; - </script>

หากมีข้อผิดพลาดใด ๆ โปรดแก้ไข

รหัสการใช้งานง่าย ๆ ที่ไม่ราบรื่นข้างต้น (แนะนำ) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น