この記事では、参照のために純粋な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.offsetwidthelse {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枚の写真が配置されているため、左側に隠された影が完全に表示されることです。右側に表示されるコンテンツは、左側のコンテンツと同じであるため、ループスクロールの効果が達成されます。
この滑らかなスクロールが達成されます。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。