この記事の例では、JSを使用して、参照のためにボタンで制御されたポーズ効果で画像スクロールを実現します。特定のコンテンツは次のとおりです
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>シームレススクロール2 </title> <style> #warp {width：1250px;高さ：300px;オーバーフロー：隠し;マージン：100px Auto 0;オーバーフローX：自動; } #warp #con {width：4000px;高さ：300px;オーバーフロー：隠し; } #WARP #con＃box1 {float：left;オーバーフロー：隠し; } #warp #con＃box2 {float：left;オーバーフロー：隠し; } #warp img {float：left;マージン右：10px;幅：200px;高さ：300px; } .btn {text-align：center;マージントップ：10px; } .btnボタン{font-size：16px; } </style> </head> <body> <div id = "warp"> <div id = "con"> <div id = "box1"> <img src = "emages/meinv1.jpg"> <img src = "image/meinv2.jpg"> <img src = "imag/jgpg"> <mg "> <mg"> <img src = " <img src = "images/meinv5.jpg"> <img src = "/meinv6.jpg"> </div> <div = "box2"> </div> </div> </div> <div> <ボタンID = "scrolll"> <<スクロール左</ボタン= "> </div> 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 scrollrr = document.getElementById（ 'Scrollr'）; var timer1 = null、timer2 = null、flage = 1; box2.innerhtml = box1.innerhtml; max = box1.clientwidth; imgmax = img.clientwidth+10; function ScrollLeft（）{flag = 1; ClearInterval（Timer1）; Timer1 = setInterval（function（）{warp.scrollleft ++; if（warp.scrollleft> = max）{warp.scrollleft = 0;} if（warp.scrollleft％imgmax == 0）{clearinterval（timer1）; cleartimeout（ティマー2）; Timer2 = Settimeout（）; Timer1 = setInterval（Scrollleft、5）}、2000）}}、5）} function 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）; timer2 = sittimeout（）{）; 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>この効果の特定の効果は、マウスを上に動かしてスクロールしてからスクロールすることです。スクロールするときは、1つの写真を1つずつスクロールすることです。つまり、1つの写真を2秒間スクロールした後、停止して次の写真をスクロールし始めます。特定のコンテンツのコードを参照してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。