เอฟเฟกต์: เลื่อนเมาส์ไปยังรูปภาพและหยุดการเลื่อนและเมาส์จะเลื่อนโดยอัตโนมัติ
สามารถปรับการเลื่อนไปทางซ้ายหรือขวา
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
-
มาร์จิ้น: 0;
Padding: 0;
-
#div1 {
ล้น: ซ่อน;
ความกว้าง: 712px;
ความสูง: 108px;
มาร์จิ้น: 100px auto;
ตำแหน่ง: ญาติ;
ความเป็นมา: สีแดง;
-
#div1 ul {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 0;
-
#div1 ul li {
ลอย: ซ้าย;
ความกว้าง: 178px;
ความสูง: 108px;
รายการสไตล์: ไม่มี;
-
</style>
การคัดลอกรหัสมีดังนี้:
<body>
<a href = "JavaScript:;"> เดินไปทางซ้าย </a>
<a href = "JavaScript:;"> เดินไปทางขวา </a>
<div id = "div1">
<ul>
<li>
<img src = "img/seamless scroll/1.jpg"/>>
</li>
<li>
<img src = "img/seamless scroll/2.jpg"/>>
</li>
<li>
<img src = "img/seamless scroll/3.jpg"/>>
</li>
<li>
<img src = "img/seamless scroll/4.jpg"/>>
</li>
</ul>
</div>
</body>
ด้านบนเป็นเลย์เอาต์ที่เรียบง่ายและต่อไปนี้เป็นรหัส JavaScript หลัก
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
window.onload = function () {
var odiv = document.getElementById ("div1");
var oul = odiv.getElementsByTagname ('ul') [0];
var Ali = oul.getElementsByTagname ('li');
var speed = 2;
OUL.InnerHtml += OUL.InnerHtml;
oul.style.width = Ali [0] .OffSetWidth * Ali.Length + 'Px';
ฟังก์ชั่นย้าย () {
if (oul.offsetleft <-oul.offsetWidth / 2) {
oul.style.left = '0';
-
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetWidth / 2 + 'px';
-
OUL.STYLE.LEFT = OUL.OffSetLeft + Speed + 'PX';
-
ตัวจับเวลา var = setInterval (ย้าย, 30);
odiv.onmouseover = function () {
ClearInterval (ตัวจับเวลา);
-
odiv.onmouseout = function () {
timer = setInterval (ย้าย, 30);
-
document.getElementByTagname ('a') [0] .onclick = function () {
ความเร็ว = -2;
-
document.getElementByTagname ('a') [1] .onclick = function () {
ความเร็ว = 2;
-
-
</script>
ให้ฉันอธิบายความคิดสั้น ๆ :
อันดับแรกตั้ง UL มีภาพทั้งหมด 8 ภาพ OUL.InnerHtml += OUL.InnerHtml;
คำนวณความกว้างของ UL กับความกว้างที่แท้จริงของ Li*8
ซ่อนเนื้อหาพิเศษในภายหลัง
หมายเหตุ: oul.offsetleft เป็นลบอย่างแน่นอน
ดังนั้นอย่าพลาดสัญญาณเชิงลบเมื่อทำการตัดสิน
การคัดลอกรหัสมีดังนี้:
if (oul.offsetleft <-oul.offsetWidth / 2) {
oul.style.left = '0';
-
ส่วนนี้หมายความว่าภาพกำลังเลื่อนไปครึ่งทางและดึงภาพกลับมาอย่างรวดเร็ว เนื่องจากโปรแกรมดำเนินการเร็วเกินไปจึงเป็นไปไม่ได้เลยที่จะเห็นการเลื่อนที่ราบรื่น
สุดท้ายใช้ความเร็วตัวแปรเพื่อควบคุมการเลื่อนในทิศทางซ้ายและขวา
รหัสข้างต้นใช้ฟังก์ชั่นพื้นฐานที่สุดเท่านั้นและเพื่อน ๆ สามารถปรับปรุงได้ต่อไปบนพื้นฐานนี้