この記事では、純粋なJSモードで広告をスクロールする効果を認識しています。
最初に完成品を見せましょう：
まず第一に、Webページスタイル：
#demo {background：#fff;オーバーフロー：隠し;ボーダー：1pxダッシュ#ccc;幅：1280px;高さ：200px; } #demo img {border：3px solid＃f2f2f2; } #indemo {float：left;幅：800％; }＃demo1 {float：left; }＃demo2 {float：left; }レイアウトは次のとおりです。
<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "＃"> <img src = "banner.jpg"＃ "＃"> <img src = "banner2.jpg"/>
特定のJS実装：
<script> var speed = 10; var tab = document.getElementById（ "demo"）; var tab1 = document.getElementById（ "demo1"）; var tab2 = document.getElementById（ "demo2"）; tab2.innerhtml = tab1.innerhtml; function marquee（）{if（tab2.offsetwidth-tab.scrollleft == 0）tab.scrollleft- = tab1.offsetwidth else {tab.scrollleft ++; }} var mymar = setInterval（Marquee、Speed）; tab.onmouseover = function（）{clearInterval（mymar）}; tab.onmouseout = function（）{mymar = setinterval（marquee、speed）}; </script>ここで注意すべきことは次のとおりです。
ScrollLeftは、ページがScrollbarを使用して右側にスクロールするときに、Scrollbarの左側に隠されたページの幅を表します。
OffsetWidthはオブジェクトの可視幅であり、スクロールバーをラップし、エッジに等しく、ウィンドウの表示サイズとともに変化します。
SetInterval（）メソッドは、指定された期間（ミリ秒）に従って関数を呼び出したり、式を計算したりできます。 SetInterval（）メソッドは、ClearInterval（）が呼び出されるか、ウィンドウが閉じられるまで関数を呼び出し続けます。
この特定の実装を理解すれば理解するのは簡単です。
実装の原則は次のとおりです。最初にスクロールする必要があるコンテンツのコピーをコピーします。右側のDivによって表示されるコンテンツが左の影に隠されたコンテンツと同じ幅である場合、親コンテナの左の影に隠されたコンテンツが表示され、左の影に隠されたコンテンツが表示され、右側に隠されたコンテンツが再生されます。右側のコンテンツが左側に隠されたコンテンツよりも少ない場合は、左に移動して影が隠されていることを実現したい親コンテナについても話し続けます。注意すべきことの1つは、右側が半分表示されると同時に左側に2枚の写真が配置されているため、左側に隠された影が完全に表示されることです。右側に表示されるコンテンツは、左側のコンテンツと同じであるため、ループスクロールの効果が達成されます。
この滑らかなスクロールが達成されます。
JSスムーズでシームレスなスクロール効果を実装するための上記のコードは、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。