この例では、参照用のシームレスなスクロール効果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プログラミングを学ぶことが役立つことを願っています。