1. ภาพรวม
การเลื่อนภาพในลูปไม่เพียง แต่สามารถเพิ่มเอฟเฟกต์แบบไดนามิกลงในหน้าเว็บ แต่ยังช่วยประหยัดพื้นที่หน้าเว็บและมั่นใจได้ว่าจะแสดงรูปภาพเพิ่มเติมในหน้า จำกัด ได้อย่างมีประสิทธิภาพ
2. คะแนนทางเทคนิค
วิธีหลักใช้เพื่อให้ได้เอฟเฟกต์การเลื่อนลูปของภาพ รูปแบบไวยากรณ์ของเมธอด settimeout () มีดังนี้:
Settimeout (ฟังก์ชั่น, มิลลิวินาที, [อาร์กิวเมนต์])
คำอธิบายพารามิเตอร์:
. ฟังก์ชั่น: ชื่อของฟังก์ชันที่กำหนดเอง JavaScript ที่จะเรียก
ข. มิลลิวินาที: กำหนดเวลาหมดเวลาเป็นมิลลิวินาที
ฟังก์ชั่น: หลังจากเวลาหมดเวลาสิ้นสุดลงฟังก์ชั่นจะถูกเรียก ค่านี้สามารถล้างด้วยฟังก์ชัน ClearTimeOut ()
3. การใช้งานเฉพาะ
(1) เพิ่มแท็ก <div> ด้วยการสาธิตแอตทริบิวต์ ID ที่ตำแหน่งที่เหมาะสมของหน้าและเพิ่มตารางและรูปภาพที่จะแสดงในแท็ก รหัสคีย์มีดังนี้:
<div id = "demo" style = "overflow: hidden; width: 455px; ความสูง: 166px;"> <table cellpacing = "0" cellpadding = "0"> <tr> <td valign = "top" id = "Marquepic1"> <! Align = "center"> <%สำหรับ (int i = 1; i <8; i ++) {%> <td> <img src = "ภาพ/<%= i%>. jpg"> </td> <%}%> </tr> </td>(2) เขียนฟังก์ชั่น JavaScript ที่กำหนดเองย้าย () เพื่อให้ได้เอฟเฟกต์การเลื่อนภาพแบบลูปภาพต่อเนื่อง ค่าความเร็วที่ใหญ่ขึ้นเท่าไหร่ภาพก็จะเลื่อนได้เร็วขึ้นเท่านั้น รหัสเฉพาะมีดังนี้:
<ภาษาสคริปต์ = "JavaScript"> var speed = 30; // ตั้งค่าช่วงเวลา marquepic2.innerhtml = marquepic1.innerhtml; var demo = document.getElementById ("สาธิต"); // รับฟังก์ชั่นวัตถุสาธิต Marquee (n) {// เมธอดสำหรับการตระหนักถึงการวนรอบภาพถ้า (marquepic1.offsetWidth-demo.scrollleft <= 0) {demo.scrollleft = 0; } else {demo.scrollleft = demo.scrollleft+n;}} var mymar = setInterval ("Marquee (5)", ความเร็ว); demo.onmouseover = function () {// หยุดการเลื่อน ClearInterval (mymar); mymar = setInterval ("Marquee (5)", ความเร็ว);} </script>ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับรหัส JavaScript ที่ตัวแก้ไขแนะนำให้คุณตระหนักถึงเอฟเฟกต์การเลื่อนภาพ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!