この記事の例では、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をもっとサポートすることを願っています。