開くWebページは、基本的にTaobaoや360の公式Webサイトホームページなどのシームレスなスクロールまたはカルーセル画像が表示されます
これらのカルーセル画像を観察することで、写真を前後に切り替えることができることがわかります。
カルーセルまたはシームレスなスクロールを達成するための2つの主な方法があります。 1つは、絵の光と闇、つまり透明な写真を変えることで画像を表示または非表示にすることです。もう1つは、動くフレームを通して目に見える領域の画像を表示することです。どちらの方法でも、同じもの、つまりタイマーを使用します。
JavaScriptにはタイマーには2つのタイプがあります。 2.settimeout（）;閉じるタイマーの2つの方法、ClearInterval（）とClearTimeout（）もあります。 2つのタイマーの違いは、前者を複数回実行できるのに対し、後者は1回だけ実行できることです。
今回は、シームレスなスクロールについてのみ話します。次の記事では、カルーセルの写真を紹介します。
シンプルなシームレスなスクロールを実装するコードは次のとおりです。
/*完全なコード* /<！Doctype HTML> <HTML LANG = "en"> <head> <meta charset = "utf-8" /> <style> div {position：relative; width：630px; height：220px; border：solid 2pxブラック;オーバーフロー：hidden;} ul {position：aspolute; top：10px;左：0;} img {width：200px; height：200px; float：left; margin-right：10px; border：2px solid yellow;} li {list-style：none; margin：0; padding：0;} ul {margin：0; padding：0;} </style> <script> window.onload = function（）{var oul = document.getElementbyid（ "main"）; var ali = oul.getelementsbytagname（ "img"）; var oinput = document.getElementsBytagname（ "input"）[0]; oul.innerhtml+= oul.innerhtml; oul.style.width = ali.length*ali [0] .offsetwidth+"px"; var Timer = null; setInterval（function（）{oul.style.left = oul.offsetleft-8+"px"; if（oul.offsetwidth/2）{oul.Style.Left = "0px";}}、30）;} src = "../ img/1.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/2.jpg"> </li> <li> <img src = "../ img/3.jpg"> </li> <img src = "../ img/3.jpg"> </li> <li> <img src = "../ img/4.jpg"> </li> <li> <img src = "../ img/9.jpg"> </li> </ul> </div> </div> </html>/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
シームレスなスクロールレイアウトは比較的簡単です。以下は主にJSコンテンツを説明しています。
最初に、それぞれULとLIを取得し、ULでコンテンツをコピーし、JSを介してULの幅を動的に変更します（シームレスに上下にスクロールし、幅を変更する場合）、最後にタイマーをオンにします。コードでは、ULは30マイクロ秒ごとに8ピクセルを左に移動し、ULの可視左マージンがULの総長さの半分未満である場合、それは0になります。コンピューターは非常に速く実行されるため、この変更を感じることはほとんど不可能です。私たちが見るのは、左に絶えず動いている絵、無限の動きだけです。
上記は、編集者が紹介したシームレスなスクロールJSコードです。私はそれが誰にでも役立つことを願っています！