この例では、参照用のシームレスなスクロール効果JavaScriptコードの実装を共有しています。特定のコンテンツは次のとおりです]
複製画像：
実装コード：
<！doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz < /title> <style> *{margin：0;パディング：0; } body {width：1000px;マージン：100px Auto;バックグラウンドカラー：#fff; } #wrapper {overflow：hidden;幅：600px;高さ：100px;位置：相対; } #wrapper ul {position：absolute;左：0;上：0; } #wrapper li {float：left;リストスタイル：なし; } #wrapper li img {width：150px;高さ：100px;ボーダーラジウス：9px; } input [type = button] {margin-top：20px;幅：35px;高さ：25px;ラインハイト：25px; } </style> <script type = "text/javascript"> window.onload = function（）{var timer = null; var速度= 4; var od = document.getElementById（ "wrapper"）; var au = od.getelementsbytagname（ 'ul'）[0]; var ali = au.getelementsbytagname（ 'li'）; au.innerhtml = au.innerhtml+au.innerhtml; au.style.width = ali [0] .offsetwidth*ali.length+'px'; Timer = setInterval（move、30）function move（）{if（au.offsetleft <-au.offsetwidth/2）{au.style.left = '0'; } if（au.offsetleft> 0）{au.style.left = -au.offsetwidth/2+'px'; } au.style.left = au.offsetleft+speed+'px'; } od.onmouseover = function（）{clearInterval（タイマー）; } od.onmouseout = function（）{timer = setInterval（move、30）} document.getElementById（ "btn1"）。onclick = function（）{speed = -4; } document.getElementById（ "btn2"）。onclick = function（）{speed = 4; }} </scrip> </head> <body> <div id = "wrapper"> <ul> <li> <img src = "img/pic4.jpg"/> </li> <li> <img src = "img/pic3.jpg"/> </li> <img src = "img/pic2.jpg"/</</</</</< src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </div> <入力タイプ= "name" "" id = "btn1" value = "left"/> <input = "" btn2 "value ="/</</</</</</<研究のための次のトピックを参照できます。
「javascriptスクロール効果の概要」、「jQueryスクロール効果概要」、「JavaScript Picture Carousel Effect Summary」
上記はこの記事に関するものであり、誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。