JSはマーキーを交換して、写真のシームレスなスクロールを実現します
たぶん誰もがこれに遭遇しました。写真がマーキーでスクロールしているとき、それが最後までスクロールされると、テキストのようにシームレスにスクロールするのではなく、出発点に戻ります。以下は、JSを介した写真のシームレスなスクロールを実現するためです。
まず次の属性を理解しましょう。
innerhtml：オブジェクトの開始および終了タグにHTMLを設定または取得します
Scrollheight：オブジェクトのスクロールの高さを取得します。
ScrollLeft：オブジェクトの左の境界と、ウィンドウ内の現在表示されているコンテンツの左端の間の距離を設定または取得します
スクロールトップ：オブジェクトの上部とウィンドウ内の可視コンテンツの上部の間の距離を設定または取得します
scrollwidth：オブジェクトのスクロール幅を取得します
offseTheight：レイアウトまたは親座標によって指定された親座標に対するオブジェクトの高さを取得しますoffsetparentプロパティ
offsetLeft：オフセットParentプロパティによって指定されたレイアウトまたは親座標に対するオブジェクトの計算された左の位置を取得します
オフセット：オフセットトッププロパティによって指定されたレイアウトまたは親座標に対するオブジェクトの計算されたトップ位置を取得します
offsetWidth：レイアウトまたは親座標のオフセットParentプロパティによって指定された親座標に対するオブジェクトの幅を取得します。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
写真はシームレスに上向きにスクロールします
<style type = "text/css"> <！ - ＃demo {background：#fff; overflow：hidden; border：1px daushed #ccc; height：100px; float：float：left;}＃demo img {border：3px solid＃f2f2f2; id = "demo1"> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "> <img src =" // www.vevb.com/other/link/link/clear_logo.gif "/> <a/> href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <！ - var speed = 10; //数値が大きいほど、速度が遅くなるほど、speed var tab = document.getElementByIdx_x（ "demo"）; var tab1 = document.getElementByIdx_x（ "demo1"）; var tab2 = document.getElementByIdx_x（ "demo2"）; tab2.innerhtml = tab1.innerhtml; // demo2function marquee（）{if（tab2.offsettop.scrolltop <= 0）// demo1とdemo2の接合部にスクロールするとき、demo2にdemo1としてclone demo1としてクローンmymar = setinterval（marquee、speed）; tab.onmouseover = function（）{clearinterval（mymar）}; //マウスが上昇すると、タイマーがクリアされて停止の目的を達成します。写真はシームレスに下向きにスクロールします
<style type = "text/css"> <！ - ＃demo {background：#fff; overflow：hidden; border：1px dashed #ccc; height：100px; float：float：left;}＃demo img {border：3px solid＃f2f2f2; id = "demo1"> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "> <img src =" // www.vevb.com/other/link/link/clear_logo.gif "/> <a/> href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <！ - var speed = 10; //数値が大きいほど、速度が遅くなるほど、speed var tab = document.getElementByIdx_x（ "demo"）; var tab1 = document.getElementByIdx_x（ "demo1"）; var tab2 = document.getElementByIdx_x（ "demo2"）; tab2.innerhtml = tab1.innerhtml; // clone demo1はdemo2tab.scrolltop = tab.scrollheightfunction marquee（）{if（tab1.offsettop-tab.scrolltop> = 0）// demo1およびdemo2 tab.scrolltop+= tab2.offseight/demoのジャンクションにスクロールするとき、// else {tab.scrolltop - }} var mymar = setInterval（marquee、speed）; tab.onmouseover = function（）{clearinterval（mymar）}; //マウスが上に移動するとき、停止する目的を達成するためにタイマーをクリアして、tab.onmouseout = function（）{mirmar = setInterval（Marquee、speed）タイマー - > </script>写真は左にシームレスにスクロールします
<style type = "text/css"> <！ - ＃demo {background：#fff; overflow：hidden; border：1px dashed #ccc; width：500px;}＃demo img {border：3px solid＃f2fff2;}＃indemo {float：left; width：800％;} demo2;左;} - > </style>左<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <！ - var speed = 10; //数値が大きいほど、速度が遅くなるほどvar tab = document.getElementByIdx_x（ "demo"）; var tab1 = document.getElementByIdx_x（ "demo1"）; var tab1 = document.getElementbyIdx_x（ "demo1"）; var tab2 = document.getElementByIdx_x（ "demo2"）; tab2.innerhtml = tab1.innerhtml; function marquee（）{if（tab2.offsetwidth-tab.scrollleft <= 0）tab.scrollleft- = tab1.offsetwidthelse {tab.scrollleft+} mymar = setInterval（marquee、speed）; tab.onmouseover = function（）{clearinterval（mymar）}; tab.onmouseout = function（）{mymar = setinterval（marquee、speed）}; - > </script>写真は右にシームレスにスクロールします
<style type = "text/css"> <！ - ＃demo {background：#fff; overflow：hidden; border：1px dashed #ccc; width：500px;}＃demo img {border：3px solid＃f2fff2;}＃indemo {float：left; width：800％;} demo2;左;} - > </style>右<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demo2"> </div> </div> <script> <！ - var speed = 10; //数値が大きいほど、速度が遅くなるほどvar tab = document.getElementByIdx_x（ "demo"）; var tab1 = document.getElementByIdx_x（ "demo1"）; var tab1 = document.getElementbyIdx_x（ "demo1"）; var tab2 = document.getElementByIdx_X（ "demo2"）; tab2.innerhtml = tab1.innerhtml; function marquee（）{if（tab.scrollleft <= 0）tab.scrollleft+= tab2.offsetwidthelse {tab.scrollleft - ;} var mymar = setInterval（marquee、speed）; tab.onmouseover = function（）{clearinterval（mymar）}; tab.onmouseout = function（）{mymar = setinterval（marquee、speed）}; - > </script>最後に、誰かがページに2つのスクロール画像セットを持ちたい場合、1つは左側に、もう1つは右側にある場合は、以下の1つを使用できます。すべてのJSをIとCSSに追加しました
右にスクロールします
<div id = "demoi"> <div id = "indemoi"> <div id = "demoi1"> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> <a href = "＃"> <img src = "// www.vevb.com/other/link/clear_logo.gif"/>> </a> <a href = "> <img src = "// www.vevb.com/other/link/clear_logo.gif"/> </a> </div> <div id = "demoi2"> </div> </div> <script> <！ - var speedi = 10; //数が大きいほど、速度が遅くなるほど、速度var tapi = document.getelementbyidx_x（ "demoi"）; var tapi1 = document.getElementByIdx_x（ "demoi1"）; var tapi2 = document.getElementbyIdx_x_x（ "demoi2"）; tapi2.innerhtml = api1.innerhtml; marqueei（）{if（tapi.scrollleft <= 0）tabi.scrollleft+= tapi2.offsetwidthelse {tapi.scrollleft - ;}} var mymari = setinterval（marqueei、speedi）; tapi.onmouseover = function（）{clearinterval（mymari）; {mymari = setinterval（marqueei、speedi）}; - > </script>JSが途切れない連続的なスクロールを認識している上記の簡単な例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。