ネイティブ Js で実装されたシンプルなシームレススクロールカルーセルのサンプルコード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で、多くの場所を変更する必要があります。また、結合度が高く、プログラムの一部にしか適用できません。そのため、画像構造を変更し、変換ポイントを計算することで、コードをアップグレードできます。

オリジナルのシンプルなスクロールカルーセルコード

<html>
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        。スクロール{
            位置: 相対的;
            width: 830px;/*表示幅: 4 つの画像 + 3 つの境界線 = 830*/
            高さ: 130px;
            境界線: 10px実線rgb(15, 15, 15);
            マージン: 100px 自動;
            オーバーフロー: 非表示;
        }
        .スクロール ul{
            位置: 絶対;
            width: 5000px;/*ulはすべてのliの幅を保存できます*/
            高さ: 130px;
            上: 0;
            左: 0;
        }
        .スクロール ul li{
            フロート: 左;
            幅: 200ピクセル;
            高さ: 130px;
            右マージン: 10px;
            オーバーフロー: 非表示;
        }

    </スタイル>
</head>
<本文>
    <div id="スクロール" class="スクロール">
        <ul id="munit">
            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>

            <li><img src="../BOM/shuzi/3.png" alt=""></li>
            <li><img src="../BOM/shuzi/4.png" alt=""></li>
            <li><img src="../BOM/shuzi/5.png" alt=""></li>
            <li><img src="../BOM/shuzi/6.png" alt=""></li>
            <li><img src="../BOM/shuzi/7.png" alt=""></li>
            <li><img src="../BOM/shuzi/8.png" alt=""></li>
            <li><img src="../BOM/shuzi/9.png" alt=""></li>
        </ul>
    </div>

    <スクリプト>
        //要素を取得します var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");
        var li = munit.children;
        // スクロール var nowLeft = 0;
        //ul要素の動きの転換点を見つけるvar back = -1470; //画像と境界線はliの幅で、表示される画像は4つなので、転換点は1260です
        //タイマー var timer = setInterval(run,20);

        //マウスを移動するとスクロールが停止します scroll.onmouseover = function(){
            タイマーの間隔をクリアします。
        }
        // カルーセルを削除します scroll.onmouseout = function(){
            タイマー = setInterval(run,20);
        }

        //モーション関数 function run(){
            nowLeft -= 2;
            // 折り返し地点に到達したかどうかを判断します。到達している場合は、即座に位置 0 に切り替えます if (nowLeft <= back) {
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

       
    </スクリプト>
</本文>
</html>

<div id="scroll"> 構造の ul に親 div を追加して、後で画像を追加したり、ul の幅を取得して変換ポイントを計算できるようにします。
1. リベートポイントの計算はJsによって自動的に計算される必要がある
var back = -munit.offsetWidth; //要素は左に移動し、値は負になります
2. 対応する画像構造の別のセットを自動的に生成します。
munit.innerHTML = munit.innerHTML + munit.innerHTML; //これにより、li タグのセットが追加され、後で画像を追加すると、いくつかのコードも増加および変更されます。

CSS書き換え部分:
  /* ul に親 div を追加して、後で画像を追加した後に ul の幅を取得できるようにします */
        .スクロール .インナー{
            位置: 相対的;
            幅: 5000ピクセル;
        }
        .スクロール ul{
            位置: 絶対;
            高さ: 130px;
            上: 0;
            左: 0;
            リストスタイル: なし;


本文書き換え部分:      
<本文>
    <div id="スクロール" class="スクロール">
       <div class="inner">
           <ul id="munit">
              <li><img src="../BOM/shuzi/3.png" alt=""></li>
              <li><img src="../BOM/shuzi/4.png" alt=""></li>
              <li><img src="../BOM/shuzi/5.png" alt=""></li>
              <li><img src="../BOM/shuzi/6.png" alt=""></li>
              <li><img src="../BOM/shuzi/7.png" alt=""></li>
              <li><img src="../BOM/shuzi/8.png" alt=""></li>
              <li><img src="../BOM/shuzi/9.png" alt=""></li>
              <li><img src="../BOM/shuzi/10.png" alt=""></li>
          </ul>
       </div>
    </div>

JS書き換え部分:
<スクリプト>
        //要素を取得します var scroll = document.getElementById("scroll");
        var munit = document.getElementById("munit");

        //書き換え部分//1 戻り点の計算はJsによって自動的に計算される必要がある var back = -munit.offsetWidth;//要素は左に移動し、値は負になります//2 対応する画像構造の別のセットを自動的に生成します li
        munit.innerHTML = munit.innerHTML + munit.innerHTML;
        // スクロール var nowLeft = 0;
        //タイマー var timer = setInterval(run,20);

        //マウスを移動するとスクロールが停止します scroll.onmouseover = function(){
            タイマーの間隔をクリアします。
        }
        // カルーセルを削除します scroll.onmouseout = function(){
            タイマー = setInterval(run,20);
        }

        //モーション関数 function run(){
            nowLeft -= 1;
            // 折り返し地点に到達したかどうかを判断します。到達している場合は、即座に位置 0 に切り替えます if (nowLeft <= back) {
                nowLeft = 0;
            }
            munit.style.left = nowLeft + "px";
        }

    </スクリプト>
</本文>
</html>

この種のコードは結合度が低く、任意の数の li と任意のサイズの画像を追加するのにも適しています。

上記はネイティブ Js で実装されたシンプルなシームレススクロールカルーセルのサンプルコードの詳細です。Js で実装されたシンプルなシームレススクロールカルーセルの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: