ตัวอย่างในบทความนี้ใช้ JS เพื่อให้ได้การเลื่อนภาพด้วยเอฟเฟกต์หยุดชั่วคราวซึ่งควบคุมโดยปุ่มสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Seamless Scroll 2 </title> <style> #warp {width: 1250px; ความสูง: 300px; ล้น: ซ่อน; มาร์จิ้น: 100px auto 0; Overflow-X: อัตโนมัติ; } #warp #con {Width: 4000px; ความสูง: 300px; ล้น: ซ่อน; } #warp #con #box1 {float: left; ล้น: ซ่อน; } #warp #con #box2 {float: left; ล้น: ซ่อน; } #warp img {float: ซ้าย; มาร์จิ้น-ขวา: 10px; ความกว้าง: 200px; ความสูง: 300px; } .Btn {Text-Align: Center; ระยะขอบด้านบน: 10px; } .btn ปุ่ม {ตัวอักษรขนาด: 16px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "ภาพ/meinv1.jpg"> <img src = "meinv2.jpg"> <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "box2"> </div> </div> </div> <div> <button = "Scrolll"> warp = document.getElementById ('warp'); var con = document.getElementById ('con'); var box1 = document.getElementById ('box1'); var box2 = document.getElementById ('box2'); var img = box1.getElementsByTagname ('img') [0]; var scrolll = document.getElementById ('scrolll'); var scrollr = document.getElementById ('scrollr'); var timer1 = null, timer2 = null, flage = 1; box2.innerhtml = box1.innerhtml; สูงสุด = Box1.ClientWidth; imgmax = img.clientWidth+10; ฟังก์ชั่น scrollleft () {flag = 1; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft ++; ถ้า (warp.scrollleft> = สูงสุด) {warp.scrollleft = 0;} ถ้า (warp.scrollleft%imgmax == 0) {clearInterval (timer1); timer1 = setInterval (scrollleft, 5)}, 2000)}}, 5)} ฟังก์ชั่น scrollright () {flag = 0; ClearInterval (Timer1); timer1 = setInterval (function () {warp.scrollleft--; ถ้า (warp.scrollleft <= 0) {warp.scrollleft = max;} ถ้า (warp.scrollleft%imgmax == 0) {clearinterval (timer1); timer1 = setInterval (scrollright, 5)}, 2000)}}, 5)} scrollleft (); scrolll.onclick = function () {// clearinterval (timer1); // ClearTimeOut (Timer2); Scrollleft (); } scrollr.onclick = function () {// clearInterval (timer1); // ClearTimeOut (Timer2); Scrollright (); } warp.onMouseEnter = function () {clearInterval (timer1); ClearTimeout (Timer2); } warp.onmouseleave = function () {clearInterval (timer1); ClearTimeout (Timer2); console.log (flage); if (flage) {scrollleft ();} else {scrollright ();}} </script> </body> </html>เอฟเฟกต์เฉพาะของเอฟเฟกต์นี้คือการเลื่อนเมาส์ขึ้นและเลื่อนจากนั้นเลื่อนออก เมื่อเลื่อนมันเป็นการเลื่อนรูปภาพทีละภาพนั่นคือหลังจากเลื่อนภาพหนึ่งภาพเป็นเวลา 2 วินาทีหยุดและเริ่มเลื่อนภาพถัดไป โปรดดูรหัสสำหรับเนื้อหาเฉพาะ
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น