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

ネイティブ 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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript を使用してカルーセル画像のシームレスなスクロールと自動再生を実現する方法
  • シームレススクロールカルーセルの例のJavaScriptオブジェクト指向実装
  • 特殊な形状のスクロールカルーセルを実現するJavaScript
  • JSはランキングテキストの上向きスクロールカルーセル効果を実現します
  • js カルーセル シームレス スクロール効果
  • js フォーカス カルーセル効果を完璧に実装する (パート 2) (スクロール可能な画像)
  • JavaScript カルーセルとマウスホイール付きカスタムスクロールバーのコード投稿を共有
  • JS シンプルなカルーセル画像スクロールの例
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • JavaScriptスクロールカルーセルの作り方の原理を詳しく解説

<<:  MySQL は SQL ステートメントの最新のレコードをクエリします (最適化)

>>:  MySQL 8.0.11 圧縮版のインストールチュートリアル

推薦する

MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード

序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...

MySQL 百万レベルのデータページングクエリ最適化ソリューション

データベースからクエリする必要があるテーブルに数万件のレコードがある場合、すべての結果を一度にクエリ...

ウェブフロントエンドエンジニアにおすすめのヒント

まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...

Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要

1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

表のセルの内容が超過した場合に省略記号効果を表示する(実装コード)

例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...

Ubuntu 向け VMware Tools のインストールと構成のチュートリアル

以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...

要素の読み込み効果を実現するための純粋なHTML+CSS

これは Element UI の読み込みコンポーネントのエフェクトです。かっこいいですね。実装してみ...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...

MySQL Strict Modeの知識ポイントの詳細な説明

I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...

MySQL でパーセンテージと最初の数パーセントを表示する方法

目次必要とする実装コードデータベース数日前、友人からこれを書くのを手伝ってほしいと頼まれました。ただ...