一連の画像循環とエンドツーエンドのスクロール効果を実現

デザインのアイデア：2つの同一のコンテンツを（1行と複数のリストセルを使用して）スクロールオブジェクトとしてDivに保存し、余分な幅のコンテンツを非表示にし、JSスクリプトでのDivの移動方法を定義します（水平座標と1）。最初のコンテンツが完全に消えると（つまり、Divが左に移動する距離がDivの幅に達し、この時点で2番目のコンテンツが完全に表示されると）、スクロールバーの座標がリセットされ、新しいラウンドが開始されます。

コードは次のとおりです。

< html > 
< head > 
    < meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" > 
    < title >スクロールエフェクトが端と端で接続されている画像のグループ</ title > 
    < スタイル> 
    #bg { 
        width ：940px ; height ：300px ; 
        background：url（images / boutique 
        
    display.jpg ）; } #sm { / * スクロールオブジェクトスタイル* / 
        overflow ：hidden ; / *隠し本部過剰コンテンツ、画像を追加し、一緒にスクロールします* / 
        幅：920px ; 高さ：280pxを; 
        マージン：0自動; 
        パディングトップ：30px ; 
        } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
< センター> 
    < div要素id = "bg" > 
        < div id = "sm" >     <！- スクロールdiv- > 
                < テーブル>         <！- テーブル1x2の外側、そして2番目のセルは空です- >
                    < tr > 
                        < td id = "Pic1" > 
                            < table >     <！- 内表格1x9、存放9张图片-> 
                                < tr > 
                                    < td > < img src = "images / 1.jpg " οnmοuseοver = "mouseover （this） " οnmοuseοut =" mouseout（this） " /> </ td > 
                                    < td > < img src =" images / 2.jpg " οnmοuseοver =" mouseover（this） " οnmοuseοut =" mouseout（this） " /> </ td > 
                                    < td > < imgsrc = "images / 3.jpg" οnmοuseοver = "mouseover（this）" οnmοuseοut = "mouseout（this）" /> </ td > 
                                    < td > < img src = "images / 4.jpg" οnmοuseοver = "mouseover（ this） " οnmοuseοut =" mouseout（this） " /> </ td > 
                                    < td > < img src =" images / 5.jpg " οnmοuseοver =" mouseover（this） " οnmοuseοut =" mouseout（this） " /> < / td > 
                                    < td > <img src = "images / 6.jpg" οnmοuseοver= "mouseover（this）" οnmοuseοut = "mouseout（this）" /> </ td > 
                                    < td > < img src = "images / 7.jpg" οnmοuseοver = "mouseover（this）" οnmοuseοut = "mouseout（this） " /> </ td > 
                                    < td > < img src =" images / 8.jpg " οnmοuseοver =" mouseover（this） " οnmοuseοut =" mouseout（this） " /> </ td > 
                                    < td > < img src = 「images / 9.jpg」οnmοuseοver = "mouseover（this）" οnmοuseοut= "mouseout（this）" /> </ td > 
                                </ tr > 
                           </ table > 
                       </ td > 
                    < td id = "Pic2" > </ td > 
                    </ tr > 
                </ table > 
        </ div > 
    < / div > 
</ center > 
 
<！- 次のコンテンツのクライアントスクリプトはページの先頭に配置できません- > 
 
< スクリプト> 
    Pic2.innerHTML = Pic1.innerHTML;// 画像のグループをコピーしますが、非表示の
    関数ですscrolltoleft（）{ //左に移動する方法を定義する
        sm.scrollLeft ++ ; // レイヤーの水平座標を変更して左に移動します
        if （sm.scrollLeft > = Pic1.scrollWidth）// リセットする必要があり
ます            sm.scrollLeft = 0 ; // レイヤーの位置リセット、ブラウザウィンドウの幅は制限されています
    } 
    
    var MyMar = setInterval（scrolltoleft、40 ）; // タイマー、メソッド名は追加できません（）
    
    function mouseover（x）{ // 画像を拡大
        x.style.width = " 210 " ; 
        x.style.height = " 256 "
        x.style.cursor = " pointer " 
    } 
    function mouseout（x）{ // 画像の復元
        x.style.width = " 105 " ; 
        x.style.height = " 128 " 
    } 
 
    // 2つの辺と2つの線はオブジェクトに応答するメソッドですイベント
    sm.οnmοuseοver = function （）{ // 匿名メソッド（function）
        clearInterval（MyMar）; // スクロールを停止
    } 
    
    sm.οnmοuseοut = function （）{ 
        MyMar = setInterval（scrolltoleft、40）; // スクロールを続ける
    } 
    
 
</ script >                             
</ body > 
</ html >