ตัวอย่างนี้แบ่งปันการใช้งานรหัส JavaScript เอฟเฟกต์การเลื่อนที่ไร้รอยต่อสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้]
ภาพการทำซ้ำ:
รหัสการใช้งาน:
<! doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz < /title> <style> *{margin: 0; Padding: 0; } body {width: 1000px; มาร์จิ้น: 100px auto; พื้นหลังสี: #FFF; } #wrapper {overflow: ซ่อน; ความกว้าง: 600px; ความสูง: 100px; ตำแหน่ง: ญาติ; } #wrapper ul {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; } #wrapper li {float: ซ้าย; รายการสไตล์: ไม่มี; } #wrapper li img {width: 150px; ความสูง: 100px; แนวชายแดน: 9px; } input [type = button] {margin-top: 20px; ความกว้าง: 35px; ความสูง: 25px; ความสูงของสาย: 25px; } </style> <script type = "text/javascript"> window.onload = function () {var timer = null; var speed = 4; var od = document.getElementById ("wrapper"); var au = od.getElementsByTagname ('ul') [0]; var Ali = au.getElementsByTagname ('li'); au.innerhtml = au.innerhtml+au.innerhtml; au.style.width = Ali [0] .OffSetWidth*Ali.Length+'Px'; timer = setInterval (ย้าย, 30) ฟังก์ชั่นย้าย () {ถ้า (au.offsetleft <-au.offsetWidth/2) {au.style.left = '0'; } if (au.offsetleft> 0) {au.style.left = -au.offsetWidth/2+'px'; } au.style.left = au.offsetleft+ความเร็ว+'px'; } od.onMouseOver = function () {clearInterval (ตัวจับเวลา); } od.onMouseOut = function () {timer = setInterval (ย้าย, 30)} document.getElementById ("btn1"). onClick = function () {speed = -4; } document.getElementById ("btn2"). onclick = function () {speed = 4; }} </script> </head> <body> <div id = "wrapper"> <ul> <li> <img src = "img/pic4.jpg"/> </li> <li> <img src = "img/pic3.jpg"/> </li> src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <อินพุตประเภท = "ปุ่ม" ชื่อ = "id =" btn1 "คุณสามารถอ้างถึงหัวข้อต่อไปนี้สำหรับการศึกษา:
"สรุปเอฟเฟกต์การเลื่อน JavaScript", "สรุปเอฟเฟกต์การเลื่อน jQuery", "สรุปผลการหมุนภาพของ JavaScript Picture Picture"
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript