ネイティブ 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 の 6 つの一般的な制約タイプの詳細な説明

目次序文1.nullでない2. ユニーク3. デフォルト4.主キー自動増分主キー5. 外部キー6.チ...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

MySQL 5.6 のインストール手順(画像とテキスト付き)

MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...

MySQL カウントを向上させる方法のまとめ

多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...

MySQL で日付を保存するためのベスト プラクティス ガイド

目次序文時間型を保存するのに文字列を使用しないでくださいMySQL の日付型日時タイムスタンプTIM...

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...

HTML ハイパーリンクの詳細な説明

ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...

SSMプロジェクトは、ホットデプロイメント構成を実装するためにTomcatとMavenを使用してWARパッケージとしてデプロイされることが多い。

背景ご存知のとおり、JavaEE プロジェクトを開発した後は、そのプロジェクトをサーバーの Tomc...

React Router V6 のアップデート

目次ReactRouterV6 の変更1. <Switch> が <Routes&...

Dockerコンテナ内でホストDocker操作を呼び出して実行する

まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...

Centos7.3 に mysql5.7.18 をインストールするための詳細なチュートリアル

1 Linuxディストリビューションのバージョンを確認する[root@typecodes ~]# c...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策

パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...

MySQL 1対多関連クエリのページングエラー問題の解決方法

XML価格照会のクエリデータにはリストが含まれているため、コレクションが必要です <結果マップ...

Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...