ネイティブJavaScriptカルーセル実装方法

ネイティブJavaScriptカルーセル実装方法

この記事では、JavaScriptカルーセルの実装方法を参考までに紹介します。具体的な内容は次のとおりです。

エフェクトのスクリーンショット:

注: divコンテナのサイズと画像パスは自分で設定でき、 img タグaタグを追加した後でブラウザが適応します。

写真を保存するための画像フォルダを作成する

HTMLテキストを書く

<本文>
//画像パスは自分で変更できます <div id="outer">
       <ul id="画像リスト">
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
       </ul>
       <div id="nav">
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
       </div>
   </div>
</本文>

CSSスタイルを追加する

<スタイル>
* {
   マージン: 0px;
   パディング: 0px;
}

/* 外枠コンテナ */
#外側{
   幅: 1555ピクセル;
   高さ: 600px;
   背景色: #bfa;
   マージン: 100px 自動;
   位置: 相対的;
   /* 隠れる */
   オーバーフロー: 非表示;

}

/* 画像のリスト */
#画像リスト {
   /* フレックスボックスレイアウト */
   ディスプレイ: フレックス;
   リストスタイル: なし;
   位置: 相対的;
   /* レイアウト方向 */
   /* flex-direct5on: 行; */
   /*画像のピクセルを1552ピクセル移動します*/
   /* 右: 1552px; */


}

#画像リスト li {
   マージン: 10px 10px;
}

/* ナビゲーションポイント */
#ナビ{
   ディスプレイ: フレックス;
   リストスタイル: なし;
   位置: 絶対;
   下: 50px;
   /* 1555/2 - 6*(20+25)/2 */
   /* 左: 642px; */

}

#nav {
   幅: 25px;
   高さ: 25px;
   マージン: 0px 10px;
   背景色: rgb(223, 129, 52);
   境界線の半径: 5px;
}

/* マウス移動効果*/
#nav a:hover {
   背景色: rgb(215, 107, 224);
}
</スタイル>

JavaScript による機能の実装

<script type="text/javascript">
    window.onload = 関数(){

    // 外側のフレームのプロパティを取得します。var outer = document.getElementById("outer");
    // imglist 属性を取得します var imglist = document.getElementById("imglist");
    // img 属性を取得します var imgArr = document.getElementsByTagName("img");

    // a 属性を取得します var allA = document.getElementsByTagName('a');
    //ナビゲーション ポイントを取得します var nav = document.getElementById("nav");
    //ナビゲーション ポイントを中央に設定します。nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

    //デフォルトの表示インデックス var index = 0;
    allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)";
    // ナビゲーションポイントタイマーを切り替える var timer = setInterval(function () {
        //ループ表示 index = (++index) % allA.length;
        //ナビゲーションポイントの背景色を設定します。 allA[index].style.backgroundColor = "rgb(215, 107, 224)";
        SetA();
        //写真を自動的に切り替えます//写真を変更すると、1 つの写真が 1552 ピクセル左に移動します
        imglist.style.transition = "右 1.5 秒"
        imglist.style.right = (インデックス * 1552) + "px";
       

    }, 1800);

    //ハイパーリンクをクリックすると画像が表示されます for (var i = 0; i < allA.length; i++) {
        //各ハイパーリンクにインデックスを追加します。allA[i].index = i;
        //各ハイパーリンクにクリック応答関数をバインドする allA[i].onclick = function () {

            imgIndex = this.index;
            //ナビゲーション ポイントの現在の位置をオーバーライドします。index = imgIndex;
            SetA();
            //画像を変更し、画像のピクセルを 1552 ピクセル左に移動する
            imglist.style.transition = "右 0.85 秒"
            imglist.style.right = (imgIndex * 1552) + "px";


            //選択したタグを変更します allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
        };
    }
    //関数のスタイルをクリアする SetA() {
        (var i = 0; i < allA.length; i++) の場合 {
            allA[i].style.backgroundColor = "";
        }
        //現在のナビゲーションに allA[index].style.backgroundColor = "rgb(215, 107, 224)" を設定します。
    }
};

</スクリプト>

完全なコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カルーセル画像</title>

    <スタイル>
        * {
            マージン: 0px;
            パディング: 0px;
        }

        /* 外枠コンテナ */
        #外側{
            幅: 1555ピクセル;
            高さ: 600px;
            背景色: #bfa;
            マージン: 100px 自動;
            位置: 相対的;
            /* 隠れる */
            オーバーフロー: 非表示;

        }

        /* 画像のリスト */
        #画像リスト {
            /* フレックスボックスレイアウト */
            ディスプレイ: フレックス;
            リストスタイル: なし;
            位置: 相対的;
            /* レイアウト方向 */
            /* flex-direct5on: 行; */
            /*画像のピクセルを1552ピクセル移動します*/
            /* 右: 1552px; */


        }

        #画像リスト li {
            マージン: 10px 10px;
        }

        /* ナビゲーションポイント */
        #ナビ{
            ディスプレイ: フレックス;
            リストスタイル: なし;
            位置: 絶対;
            下: 50px;
            /* 1555/2 - 6*(20+25)/2 */
            /* 左: 642px; */

        }

        #nav {
            幅: 25px;
            高さ: 25px;
            マージン: 0px 10px;
            背景色: rgb(223, 129, 52);
            境界線の半径: 5px;
        }

        /* マウス移動効果*/
        #nav a:hover {
            背景色: rgb(215, 107, 224);
        }
    </スタイル>
    <script type="text/javascript">
        window.onload = 関数(){

            // 外側のフレームのプロパティを取得します。var outer = document.getElementById("outer");
            // imglist 属性を取得します var imglist = document.getElementById("imglist");
            // img 属性を取得します var imgArr = document.getElementsByTagName("img");

            // a 属性を取得します var allA = document.getElementsByTagName('a');
            //ナビゲーション ポイントを取得します var nav = document.getElementById("nav");
            //ナビゲーション ポイントを中央に設定します。nav.style.left = (outer.offsetWidth / 2) - (allA.length * 45 / 2) + "px";

            //デフォルトの表示インデックス var index = 0;
            allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)";
            // ナビゲーションポイントタイマーを切り替える var timer = setInterval(function () {
                インデックス = (++index) % allA.length;
                //ナビゲーションポイントの背景色を設定します。 allA[index].style.backgroundColor = "rgb(215, 107, 224)";
                SetA();
                //写真を自動的に切り替えます//写真を変更すると、1 つの写真が 1552 ピクセル左に移動します
                imglist.style.transition = "右 1.5 秒"
                imglist.style.right = (インデックス * 1552) + "px";

                //ループ表示}, 1800);


            //ハイパーリンクをクリックすると画像が表示されます for (var i = 0; i < allA.length; i++) {

                //各ハイパーリンクにインデックスを追加します。allA[i].index = i;
                //各ハイパーリンクにクリック応答関数をバインドする allA[i].onclick = function () {

                    imgIndex = this.index;
                    //ナビゲーション ポイントの現在の位置をオーバーライドします。index = imgIndex;
                    SetA();
                    //画像を変更し、画像のピクセルを 1552 ピクセル左に移動する
                    imglist.style.transition = "右 0.85 秒"
                    imglist.style.right = (imgIndex * 1552) + "px";


                    //選択したタグを変更します allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";

                };

            }
            //関数のスタイルをクリアする SetA() {
                (var i = 0; i < allA.length; i++) の場合 {
                    allA[i].style.backgroundColor = "";
                }

                allA[インデックス].style.backgroundColor = "rgb(215, 107, 224)";


            }


        };


    </スクリプト>
</head>

<本文>

    <div id="外側">
        <ul id="画像リスト">
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
        </ul>
        <div id="nav">
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
        </div>
    </div>
</本文>
</html>

関数の使用法:

タイマーを作成します。

setInterval(関数() {},30)

丸い境界線を設定します。

境界線の半径: 5px;

offsetWidth 水平幅 + 左右のパディング + 左右の境界線
offsetHeight 垂直高さ + 上下のパディング + 上下の境界線

clientWidth 水平幅 + 左右のパディング
clientHeight 垂直高さ + 上部と下部のパディング

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • カルーセルの完全なコードを実装するためのjs
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • 携帯電話のスライドスイッチカルーセル画像の例をサポートする効果を実現するためのjs
  • JS カルーセル図の実装の簡単なコード
  • js で左右のボタンをクリックして画像を再生する
  • JSは自動カルーセル効果(適応型画面幅+携帯電話タッチスクリーンスライド)を実現します
  • html+js+css を使用してページ カルーセル効果を実現する (例の説明)
  • JSは左右のシームレスなカルーセルコードを実装します
  • 無限ループカルーセル効果を実現するネイティブ js
  • jsは左から右へのスライドカルーセル効果を実現します

<<:  HTTPS の原則の説明

>>:  MySQLインデックスの詳細な分析

推薦する

webpackでCSSを分割・圧縮し、リンクでインポートする手順

まずコードファイルの構造を見てみましょう。エントリファイル (index1.js) の内容: ...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

UniappはBaidu Voiceを使用して録音をテキストに変換する機能を実現

3日間さまざまな困難に遭遇した後、ようやくこの機能を実現しました。正常に実装できる方法を見つける前に...

nginx ログを elasticsearch にインポートする方法の例

nginx ログは filebeat によって収集され、logstash に渡され、logstash...

Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します

日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...

React における同期および非同期 setState の問題のコード分析

React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...

MySQL での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

Linux でハイパースレッディング技術を動的に有効/無効にする方法の詳細な説明

序文Intel のハイパースレッディング テクノロジーにより、1 つの物理コア上で 2 つのスレッド...

mysql8.x docker リモートアクセスの詳細な設定

目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...

React NativeプロジェクトでLottieアニメーションを使用する方法

Lottie は、Airbnb が開発した iOS、Android、React Native 向けの...

Dockerはコンテナに入るためにnsenterツールを使用する

Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...

Vue プロジェクトに Electron を追加するための詳細なコード

1. package.jsonに追加する "メイン": "electr...