يستخدم المثال في هذه المقالة JS لتحقيق تمرير الصورة بتأثير مؤقت ، يتم التحكم فيه بواسطة الأزرار ، للرجوع إليه. المحتوى المحدد كما يلي
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> seamless scroll 2 </title> <style> #warp {width: 1250px ؛ الارتفاع: 300 بكسل ؛ الفائض: مخفي. الهامش: 100px Auto 0 ؛ Overflow-X: Auto ؛ } #warp #con {width: 4000px ؛ الارتفاع: 300 بكسل ؛ الفائض: مخفي. } #warp #con #box1 {float: left ؛ الفائض: مخفي. } #warp #con #box2 {float: left ؛ الفائض: مخفي. } # -warp img {float: left ؛ يمين الهامش: 10px ؛ العرض: 200 بكسل ؛ الارتفاع: 300 بكسل ؛ } .btn {text-align: center ؛ الهامش: 10 بكسل ؛ }. button button {font-size: 16px ؛ } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "images/meinv1.jpg"> <img src = "images/meinv2 <img src = "images/meinv5.jpg"> <img src = "images/meinv6.jpg"> </div> <div id = "box2"> </div> </viv> </viv> <div> <button> button> 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 ؛ max = box1.clientwidth ؛ imgmax = img.clientwidth+10 ؛ وظيفة scrollleft () {flag = 1 ؛ ClearInterval (timer1) ؛ timer1 = setInterval (function () {warp.scrollleft ++ ؛ if (warp.scrollleft> = max) {warp.scrollleft = 0 ؛} if (timer2) ؛ timer1 = setInterval (scrollleft ، 5)} ، 2000)}} ، 5)} scrollright () {flag = 0 ؛ ClearInterval (timer1) ؛ timer1 = setInterval (function () {warp.scrollleft-- ؛ if (warp.scrollleft <= 0) {warp.scrollleft = max ؛} if (warp.scrollleft ٪ imgmax == 0) {clearinterval (timer1) ؛ cleartimeout (timer2) ؛ 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>التأثير المحدد لهذا التأثير هو تحريك الماوس لأعلى والتمرير ، ثم التمرير. عند التمرير ، يكون التمرير للصور واحدة تلو الأخرى ، أي بعد التمرير صورة واحدة لمدة ثانيتين ، توقف وابدأ في التمرير في الصورة التالية. يرجى الرجوع إلى رمز المحتوى المحدد.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.