ตัวอย่างง่ายๆของการใช้การเลื่อนภาพอย่างต่อเนื่องอย่างต่อเนื่อง

js แทนที่ Marquee เพื่อให้ได้การเลื่อนรูปภาพอย่างราบรื่น

บางทีทุกคนอาจพบสิ่งนี้ เมื่อภาพเลื่อนใน Marquee เมื่อมันเลื่อนไปจนถึงจุดสิ้นสุดมันจะกระโดดกลับไปที่จุดเริ่มต้นแทนที่จะเลื่อนอย่างราบรื่นเหมือนข้อความ ต่อไปนี้คือการตระหนักถึงการเลื่อนรูปภาพอย่างราบรื่นผ่าน JS

ก่อนอื่นให้เข้าใจคุณลักษณะต่อไปนี้:

InnerHTML: ตั้งค่าหรือรับ HTML อยู่ในแท็กเริ่มต้นและปลายทางของวัตถุ

Scrollheight: ได้รับความสูงของวัตถุ

Scrollleft: ตั้งค่าหรือรับระยะห่างระหว่างขอบเขตซ้ายของวัตถุและปลายด้านซ้ายสุดของเนื้อหาที่มองเห็นได้ในปัจจุบันในหน้าต่าง

Scrolltop: ตั้งค่าหรือรับระยะห่างระหว่างด้านบนของวัตถุและด้านบนของเนื้อหาที่มองเห็นได้ในหน้าต่าง

Scrollwidth: รับความกว้างการเลื่อนของวัตถุ

Offsetheight: ได้รับความสูงของวัตถุที่สัมพันธ์กับเลย์เอาต์หรือพิกัดหลักที่ระบุโดยคุณสมบัติ OffsetParent ของพิกัดหลัก

Offsetleft: ได้รับตำแหน่งซ้ายที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติออฟเซ็ต PREAT

OFFSETTOP: ได้รับตำแหน่งด้านบนที่คำนวณได้ของวัตถุที่สัมพันธ์กับเค้าโครงหรือพิกัดหลักที่ระบุโดยคุณสมบัติ OFFSETTOP

OffsetWidth: ได้รับความกว้างของวัตถุที่สัมพันธ์กับเลย์เอาต์หรือพิกัดหลักที่ระบุโดยคุณสมบัติ OffsetParent พิกัดหลัก

-

รูปภาพเลื่อนขึ้นไปอย่างราบรื่น

 <style type = "text/css"> <!- #demo {พื้นหลัง: #fff; overflow: hidden; border: 1px dashed #ccc; ความสูง: 100px; text-allign: center; float: left;} #demo img {border: 3px sold #f2f2f2; id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = " href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vev.com/other/link/link/link/link src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // ยิ่งใหญ่กว่าจำนวนที่ช้าลงความเร็ว var tab = document.getElementByIdx_x ("demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab2 = document.getElementByIdx_x ("Demo2"); tab2.innerhtml = tab1.innerhtml; // clone demo1 เป็น demo2function marquee () {ถ้า (tab2.offsettop-tab.scrolltop <= 0) // เมื่อเลื่อนไปที่ทางแยกของ demo1 และ demo2 tab.scrolltop- = tab1 mymar = setInterval (marqueee, speed); tab.onmouseover = function () {clearinterval (mymar)}; // เมื่อเมาส์ถูกเลื่อนขึ้นตัวจับเวลาจะถูกล้างเพื่อให้ได้จุดประสงค์ในการเลื่อนแท็บ}}}

รูปภาพเลื่อนลงอย่างราบรื่น

 <style type = "text/css"> <!- #demo {พื้นหลัง: #fff; overflow: hidden; border: 1px dashed #ccc; ความสูง: 100px; text-allign: center; float: left;} #demo img {border: 3px solid #f2f2f2; id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = " href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vev.com/other/link/link/link/link src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // ยิ่งใหญ่กว่าจำนวนที่ช้าลงความเร็ว var tab = document.getElementByIdx_x ("demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab2 = document.getElementByIdx_x ("Demo2"); tab2.innerhtml = tab1.innerhtml; // clone demo1 คือ demo2tab.scrolltop = tab.scrollheightfunction marquee () {ถ้า (tab1.offsettop-tab.scrolltop> = 0) // เมื่อเลื่อนไปที่ทางแยกของ Demo1 และ Demo2 else {tab.scrolltop-}} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearinterval (mymar)}; // เมื่อเมาส์ถูกขยับขึ้น ออกไปรีเซ็ตตัวจับเวลา-> </script>

รูปภาพเลื่อนไปทางซ้ายอย่างราบรื่น

 <style type = "text/css"> <!-#demo {background: #fff; overflow: hidden; border: 1px dashed #ccc; width: 500px;}#demo img {border: 3px solid#f2f2f2; {float: left;}-> </style> เลื่อนไปทางซ้าย <div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/link/link/link src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // ยิ่งมีจำนวนมากขึ้นจะช้าลงแท็บความเร็ว var = document.getElementByIdx_x ("demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab1 = document.getElementByIdx_x ("demo1"); tab2 = document.getElementByIdx_x ("demo2"); tab2.innerhtml = tab1.innerhtml; function marquee () {ถ้า (tab2.offsetWidth-tab.scrollleft <= 0) tab.scrollleft-= tab1.offset mymar = setInterval (marqueee, speed); tab.onmouseover = function () {clearinterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marqueee, ความเร็ว)};-> </script>

รูปภาพเลื่อนไปทางขวาอย่างราบรื่น

 <style type = "text/css"> <!-#demo {background: #fff; overflow: hidden; border: 1px dashed #ccc; width: 500px;}#demo img {border: 3px solid#f2f2f2; {float: left;}-> </style> เลื่อนขวา <div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "// www.vevb.com/link/link/link src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <!-var speed = 10; // ยิ่งมีจำนวนมากขึ้นจะช้าลงแท็บความเร็ว var = document.getElementByIdx_x ("demo"); var tab1 = document.getElementByIdx_x ("demo1"); var tab1 = document.getElementByIdx_x ("demo1"); tab2 = document.getElementByIdx_x ("demo2"); tab2.innerhtml = tab1.innerhtml; ฟังก์ชั่น marqueee () {ถ้า (tab.scrollleft <= 0) tab.scrollleft+= tab2.offsetwidthelse {tab.scrollleft mymar = setInterval (marqueee, speed); tab.onmouseover = function () {clearinterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marqueee, ความเร็ว)};-> </script>

ในที่สุดหากมีคนต้องการมีชุดภาพเลื่อนสองชุดบนหน้าหนึ่งไปทางซ้ายและอีกด้านหนึ่งไปทางขวาแล้วหนึ่งด้านล่างสามารถใช้งานได้ ฉันเพิ่ม js ทั้งหมดเป็น i และ css

เลื่อนไปทางขวา

 <div id = "demoi"> <div id = "indemoi"> <div id = "demoi1"> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "#"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> speedi = 10; // ยิ่งมีจำนวนมากขึ้น, ความเร็วที่ช้าลง var tabi = document.getElementByIdx_x ("demoi"); var tabi1 = document.getElementByIdx_x ("demoi1"); var tabi2 = document.getElementByIdx_x ("demoi2"); tabi2.innerhtml = tabi marqueeei () {ถ้า (tabi.scrollleft <= 0) tabi.scrollleft+= tabi2.offsetwidthelse {tabi.scrollleft-;}} var mymari = setInterval (marqueei, speedi); {mymari = setInterval (marqueeei, speedi)};-> </script>

ตัวอย่างง่ายๆข้างต้นของ JS ที่ตระหนักถึงการเลื่อนรูปภาพอย่างต่อเนื่องอย่างต่อเนื่องคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น