この記事の例は、参照のためにJSシームレスなスクロール効果を実装するためのコードを共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>シームレススクロール</title> <style> #warp {wid：1200px;高さ：300px;オーバーフロー：隠し;マージン：100px Auto 0; } #warp #con {width：4000px;高さ：300px;オーバーフロー：隠し; } #WARP #con＃box1 {float：left;オーバーフロー：隠し; } #warp #con＃box2 {float：left;オーバーフロー：隠し; } #warp img {float：left;幅：200px;高さ：300px; } </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 id = "box2"> </div> </div> </div> <scrip> var warp = document.getelementbyid（ 'warp'）; var con = document.getElementById（ 'con'）; var box1 = document.getElementById（ 'box1'）; var box2 = document.getElementById（ 'box2'）; // box2.innerhtml = box1.innerhtml; var timer1 = null、x = 0; function scroll（）{// scroll function box2.innerhtml = box1.innerhtml; Timer1 = setInterval（function（）{x ++; if（x> = box1.clientwidth）{x = 0; warp.scrollleft = x;} warp.scrollleft = x;}、10）} scroll（）; warp.onmouseenter = function（）{clearinterval（timer1）; } warp.onmouseleave = function（）{scroll（）; } </script> </body> </html>この効果の主な考え方は、画像のコンテンツ部分の幅が表示される領域の幅よりもはるかに大きく、スクロールバーが表示されることです。以前のグループの写真のコンテンツをコピーして、効果をシームレスにスクロールするようにします。詳細については、コードを参照してください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。