หน้าเว็บใด ๆ ที่คุณเปิดจะเห็นภาพการเลื่อนหรือภาพหมุนอย่างราบรื่นเช่น Taobao และ 360 เว็บไซต์อย่างเป็นทางการ
โดยการสังเกตภาพม้าหมุนเหล่านี้คุณจะพบว่าสามารถเปลี่ยนรูปภาพไปมาได้อย่างไรคุณจะทำอย่างไร?
มีสองวิธีหลักในการบรรลุม้าหมุนหรือการเลื่อนที่ไร้รอยต่อ หนึ่งคือการแสดงหรือซ่อนภาพโดยการเปลี่ยนแสงและความมืดของภาพนั่นคือภาพโปร่งใสและอีกภาพหนึ่งคือการแสดงภาพในพื้นที่ที่มองเห็นได้ผ่านกรอบการเคลื่อนไหว ทั้งสองวิธีจะใช้สิ่งเดียวกันนั่นคือตัวจับเวลา
มีสองประเภทของตัวจับเวลาใน JavaScript, 1.SetInterval (); 2.settimeout (); นอกจากนี้ยังมีสองวิธีสำหรับการปิดตัวจับเวลา, ClearInterval () และ ClearTimeOut () ความแตกต่างระหว่างตัวจับเวลาทั้งสองคืออดีตสามารถดำเนินการได้หลายครั้งในขณะที่หลังสามารถดำเนินการได้เพียงครั้งเดียว
ครั้งนี้ฉันจะพูดถึงการเลื่อนที่ไร้รอยต่อเท่านั้นและบทความถัดไปจะแนะนำภาพม้าหมุน
รหัสเพื่อใช้การเลื่อนแบบไร้รอยต่ออย่างง่ายมีดังนี้:
/*รหัสเต็ม* /<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8" /> <style> div {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 630px; ความสูง: 220px; สีดำ; ล้น: ซ่อน;} ul {ตำแหน่ง: สัมบูรณ์; ด้านบน: 10px; ซ้าย: 0;} img {width: 200px; ความสูง: 200px; float: ซ้าย; สีเหลือง;} li {list-style: none; margin: 0; padding: 0;} ul {margin: 0; padding: 0;} </style> <script> window.onload = function () {var oul = document.getElementById ("main"); oinput = document.getElementsByTagname ("อินพุต") [0]; oul.innerhtml+= oul.innerhtml; oul.style.width = Ali.length*Ali [0] timer = null; setInterval (function () {oul.style.left = oul.offsetleft-8+"px"; ถ้า (oul.offsetleft <-oul.offsetWidth/2) {oul.style.left = "0px";}}, 30) id = "main"> <li> <img src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg" src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li>-
เค้าโครงการเลื่อนที่ไร้รอยต่อนั้นค่อนข้างง่าย ส่วนใหญ่จะอธิบายเนื้อหา JS:
ก่อนอื่นรับ UL และ LI ตามลำดับจากนั้นคัดลอกเนื้อหาใน UL ปรับเปลี่ยนความกว้างของ UL ผ่าน JS (ถ้าคุณต้องการเลื่อนขึ้นและลงอย่างราบรื่นปรับเปลี่ยนความกว้าง) และในที่สุดก็เปิดตัวจับเวลา ในรหัส UL จะย้าย 8 พิกเซลไปทางซ้ายทุก ๆ 30 ไมโครวินาทีและเมื่อขอบซ้ายที่มองเห็นได้ของ UL น้อยกว่าครึ่งหนึ่งของความยาวทั้งหมดของ UL มันจะกลายเป็น 0 เนื่องจากคอมพิวเตอร์ทำงานได้อย่างรวดเร็วการเปลี่ยนแปลงนี้แทบจะเป็นไปไม่ได้ที่จะรู้สึก ทั้งหมดที่เราเห็นคือภาพเคลื่อนไหวไปทางซ้ายอย่างต่อเนื่องการเคลื่อนไหวที่ไม่มีที่สิ้นสุด
ด้านบนเป็นรหัส JS แบบเลื่อนที่ไร้รอยต่อที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!