シンプルなカルーセル効果を実現するネイティブ js

シンプルなカルーセル効果を実現するネイティブ js

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果は以下のとおりです。

分析:

分析結果:

分析と実装:

1. document.querySelector('.class name')を通じてカルーセルを含む大きなボックス (.carousel) を取得し、カルーセルの左ボタンと右ボタンを含むラベルの親要素 (.chevron) を取得し、左ボタンと右ボタン (.chevron-left、.chevron-right) を取得し、カルーセル画像を含む親要素 ul (.carousel-body) を取得します [注: ここでは li ではなく ul を取得します。カルーセルが移動すると ul 全体が一緒に移動するためです]、最後にカルーセル画像を含む li (.indicators li) を取得します

//カルーセル用の大きなボックス let oCarousel = document.querySelector('.carousel')
//カルーセルの左ボタンと右ボタンのラベルの親要素 let oChevron = document.querySelector('.chevron')
//左ボタン let oLeft = document.querySelector('.chevron-left')
//右ボタン let oRight = document.querySelector('.chevron-right')
//カルーセル画像が配置されている親要素 ul を取得します
oUl = document.querySelector('.carousel-body') とします。
//カルーセル画像を含むliを取得する
oActives = document.querySelectorAll('.indicators li') とします。

2. 左ボタンと右ボタンをクリックすると、カルーセル画像が前の写真または次の写真に移動します。

まず、複数の呼び出しを容易にするためにanimation()関数をカプセル化します。

関数アニメーション(obj,target){
    // タイマーをクリアする clearInterval(obj.timer)
        obj.timer = setInterval(()=>{
            // 要素の現在の位置を読み取る let curX=obj.offsetLeft
 
            //ステップサイズを定義する let step=10
            // 移動する方向を決定する(目標位置のサイズと現在の位置を比較する) 
            if(target<curX){
                ステップ=-10
            }
            // 現在の位置、目標位置、ステップ長の関係に従って、 // 目標位置と現在の位置の間の距離がステップ長より小さい限り、要素の位置は目標位置に直接設定されます if (Math.abs (target-curX) < Math.abs (step)) {
                obj.style.left=ターゲット+'px'
                クリア間隔(obj.timer)
            }それ以外{
                // 次のステップの位置を計算する let nextX=curX+step
                // 次のステップの位置をobj.style.leftに割り当てる
                obj.style.left=nextX+'px'
            }
        },10)
    }

①カルーセル内の左右の矢印は、マウスがカルーセル内に移動する前は非表示になっており、マウスがカルーセル内に移動すると表示されます。そのため、カルーセルを配置する大きなボックス(.carousel)にマウスイン(onmouseover)とマウスアウト(onmouseout)のイベントをバインドする必要があります。

oCarousel.onmouseover = 関数 () {
        oChevron.style.display = "ブロック"
    }
 
    oCarousel.onmouseout = 関数 () {
        oChevron.style.display = "なし"
    }

② クリックイベントを左ボタンと右ボタンにバインドし、カルーセル内の画像の位置を表すカウンターグローバル変数nを定義します。ここでのliのサイズは500pxなので、グローバル変数のステップサイズを500に設定します(ステップサイズは、カルーセル内のulの各移動距離です)。

n = 0とする
ステップ = 500 とする
    oLeft.onclick = 関数(){
        んー
        
        (n == -1)の場合{
       //最初の画像 (n=0) に移動したら、もう一度クリックし (n=-1)、n を 4 に設定して最後の画像の位置にジャンプします //カルーセル画像を含む ul の位置が最後の画像の位置に変更されます (画像の幅は 500 ピクセルなので、最後の画像は 5*500=2500 になります)
            oUl.style.left = -2500 + 'px'
            4 位
        }
        //ターゲットは移動距離、つまりn番目の画像*各画像の幅です 
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    oRight.onclick = 関数(){
        ++ いいえ
        (n == 6)の場合{
        //最後の画像 (n=5) に移動したら、もう一度クリックし (n=6)、n を 1 に設定して最初の画像の位置に移動します oUl.style.left = 0 + 'px'
            1 の場合
        }
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }

3. 下の番号をクリックしてカルーセルを切り替えます。

//document.querySelectorAll('.indicators li') を通じて上記で取得した li は疑似配列の形式で返されるため、各 li のクリック イベントをバインドするには疑似配列をトラバースする必要があります for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = 関数 () {
            //クリックされた項目のスタイルをハイライトするように設定する setActive(i)
            //そして、i の値を n に代入します (現在 i 番目の画像が表示されることを記録するのと同じです)
            n = 私
            //移動距離を設定する let target = -n * step
            アニメーション(oUl, ターゲット)
        }
    }
 
    // liを強調表示する関数をカプセル化します function setActive(ind) {
        //排他的思考を使用する: すべてをクリアしてから、クラス名を個別に設定する for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'アクティブ'
    }

手順2で、スライドショーの下のページのハイライトが左矢印と右矢印をクリックしても変わらない状況を修正します。

oLeft.onclick = 関数(){
        んー
        (n == -1)の場合{
            oUl.style.left = -2500 + 'px'
            4 位
        }
        //setActive() 関数を呼び出して、n 番目の画像ページ番号のハイライト状態を変更します。setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    oRight.onclick = 関数(){
        ++ いいえ
        (n == 6)の場合{
            oUl.style.left = 0 + 'px'
            1 の場合
        }
        // n が 5 の場合、6 番目の画像に到達したことを意味します (6 番目の画像は 1 番目の画像と同じですが、瞬間ジャンプの影響を防ぐためのスライド トランジションに使用されます)。そのため、ページ番号を 0 (最初の画像) に設定してハイライトする必要があります。 // ここでは 3 項式を使用します。n が 5 の場合、1 番目の画像をハイライトに設定し、それ以外の場合は n 番目の画像をハイライトに設定します。 n == 5 ? setActive(0) : setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }

4. タイマーを設定し、カルーセルが内側に移動したときにタイマーをクリアし、外側に移動したときにタイマーを開始します(内側に移動したときに自動再生を停止し、外側に移動したときに自動再生を開始します)。

//ページをロードするときは、まずタイマーをオンにする必要があります。そうしないと、カルーセルは自動的に再生されません。タイマーを開始するには、ムーブインとムーブアウトのイベントを待つ必要があります。timer = setInterval(function () {
            //右ボタンにバインドされたクリックイベント oRight.onclick() を呼び出す
        }, 2000)
 
    //マウスが移動したら、左矢印と右矢印を表示し、タイマーをクリアします oCarousel.onmouseover = function () {
        oChevron.style.display = "ブロック"
        クリアインターバル(タイマー)
    }
 
    //マウスが外に出ると、左右の矢印を非表示にしてタイマーを開始します oCarousel.onmouseout = function () {
        oChevron.style.display = "なし"
        タイマー = setInterval(関数() {
            o右クリック()
        }, 2000)
    }

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

CSS スタイルは次のとおりです。

* {
     マージン: 0;
     パディング: 0;
        }
 
        .カルーセル{
            幅: 500ピクセル;
            高さ: 200px;
            境界線: 1px 実線の赤;
            マージン: 100px 自動;
            位置: 相対的;
            オーバーフロー: 非表示;
        }
        .carousel li {
            リストスタイル: なし;
        }
 
        /* カルーセルコンテンツ*/
        .carousel-body {
            幅: 3000ピクセル;
            高さ: 200px;
            位置: 絶対;
        }
        .carousel-body li {
            リストスタイル: なし;
            フロート: 左;
            幅: 500ピクセル;
            高さ: 200px;
        }
 
        .carousel-body li img {
            幅: 100%;
            高さ: 100%;
        }
 
 
        /* 左と右のフォーカスボタン ​​/
        .carousel .chevron {
            位置: 絶対;
            上位: 50%;
            高さ: 40px;
            幅: 100%;
            変換: translateY(-50%);
            表示: なし;
        }
 
        .carousel .chevron-left,
        .carousel .chevron-right {
            幅: 40px;
            高さ: 40px;
            背景: #000;
            カーソル: ポインタ;
            テキスト配置: 中央;
            行の高さ: 40px;
            フォントサイズ: 30px;
            フォントの太さ: 太字;
            色: #fff;
            不透明度: .3;
            境界線: 1px 実線 #fff;
        }
 
 
        .carousel .chevron-left {
            フロート: 左;
            左マージン: 10px;
        }
 
 
        .carousel .chevron-right {
            フロート: 右;
            右マージン: 10px;
        }
 
 
        /* 5.2 カルーセルインジケータ構造*/
        .carousel .indicators {
            位置: 絶対;
            右: 30px;
            下: 20px;
        }
 
        .carousel .indicators li {
            フロート: 左;
            幅: 20px;
            高さ: 20px;
            右マージン: 10px;
            背景: rgba(255, 255, 255, .8);
            テキスト配置: 中央;
            行の高さ: 20px;
            カーソル: ポインタ;
            色: rgba(0, 0, 0, .5);
        }
 
        .carousel .indicators li.active {
            背景: #09f;
            色: 赤;
 }

HTML は次のとおりです。

<div class="carousel">
        <!-- カルーセルコンテンツ -->
        <ul class="carousel-body">
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <!-- a3.1 最初のものと同じ新しい li を追加します-->
            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->
        </ul>
        <!-- 左フォーカス ボタンと右フォーカス ボタン -->
        <div class="chevron">
            <div class="chevron-left">&laquo;</div>
            <div class="chevron-right">&raquo;</div>
        </div>
        <!-- 5.1 カルーセルインジケータの構造-->
        <ol class="インジケーター">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

js は次のとおりです。

oCarousel = document.querySelector('.carousel') とします。
oChevron = document.querySelector('.chevron') とします。
oLeft = document.querySelector('.chevron-left') とします。
oRight = document.querySelector('.chevron-right') とします。
oUl = document.querySelector('.carousel-body') とします。
oActives = document.querySelectorAll('.indicators li') とします。
 
    n = 0とする
    ステップ = 500 とする
    タイマーを鳴らす
    タイマー = setInterval(関数() {
            o右クリック()
        }, 2000)
    oCarousel.onmouseover = 関数 () {
        oChevron.style.display = "ブロック"
        クリアインターバル(タイマー)
    }
 
    oCarousel.onmouseout = 関数 () {
        oChevron.style.display = "なし"
        タイマー = setInterval(関数() {
            o右クリック()
        }, 2000)
    }
    oLeft.onclick = 関数(){
        んー
        (n == -1)の場合{
            oUl.style.left = -2500 + 'px'
            4 位
        }
        setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    oRight.onclick = 関数(){
        ++ いいえ
        (n == 6)の場合{
            oUl.style.left = 0 + 'px'
            1 の場合
        }
        n == 5 ? setActive(0) : setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    (i = 0 とします; i < oActives.length; i++) {
        oActives[i].onclick = 関数 () {
            アクティブにする(i)
            n = 私
            ターゲット = -n * ステップ
            アニメーション(oUl, ターゲット)
        }
    }
 
    // liを強調表示する関数をカプセル化します function setActive(ind) {
        (j = 0; j < oActives.length; j++) の場合 {
            oActives[j].className = ''
        }
        oActives[ind].className = 'アクティブ'
    }
 
    関数アニメーション(obj,target){
        // タイマーをクリアする clearInterval(obj.timer)
        obj.timer = setInterval(()=>{
            // 要素の現在の位置を読み取る let curX=obj.offsetLeft
 
            //ステップサイズを定義する let step=10
            // 移動する方向を決定する(目標位置のサイズと現在の位置を比較する) 
            if(target<curX){
                ステップ=-10
            }
            // 現在の位置、目標位置、ステップ長の関係に従って、 // 目標位置と現在の位置の間の距離がステップ長より小さい限り、要素の位置は目標位置に直接設定されます if (Math.abs (target-curX) < Math.abs (step)) {
                obj.style.left=ターゲット+'px'
                クリア間隔(obj.timer)
            }それ以外{
                // 次のステップの位置を計算する let nextX=curX+step
                // 次のステップの位置をobj.style.leftに割り当てる
                obj.style.left=nextX+'px'
            }
        },10)
}

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

以下もご興味があるかもしれません:
  • シンプルなカルーセル チャートを実装するための JavaScript の最も完全なコード分析 (ES5)
  • jsを使用してカルーセル効果を実現する
  • JavaScript を使用してカルーセル効果を実装する
  • JavaScript でカルーセル効果を実装する
  • カルーセルの完全なコードを実装するためのjs
  • ネイティブ js でカルーセルを実装するためのサンプル コード
  • 携帯電話のスライドスイッチカルーセル画像の例をサポートする効果を実現するためのjs
  • JS カルーセル図の実装の簡単なコード
  • js で左右のボタンをクリックして画像を再生する
  • シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

<<:  MySQL フラッシュバック ツール binlog2sql の詳細なインストールと設定のチュートリアル

>>:  IDEA Maven プロジェクトで Tomcat をデバッグ モードで実行する詳細なチュートリアル

推薦する

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...

IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決策

この記事では、主に、IDEA を MYSQL データベースに接続するための構成時に失敗する問題の解決...

CSS マルチカラムレイアウトソリューション

1. 固定幅+適応型期待される効果: 左側は固定幅、右側は適応幅 共通コード: html: <...

Linuxでホスト名を永続的に変更する方法

ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...

InnoDB タイプの MySql によるテーブル構造とデータの復元

前提条件: データベースを復元するために必要な .frm ファイルと .ibd ファイルを保存します...

ウェブページのグリッドデザインを考える

<br />元のアドレス: http://andymao.com/andy/post/8...

JS の 6 つの継承方法とその長所と短所

目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承(プロトタイプチェーン継承とコンス...

vue cli で env を使用するガイド

目次序文紹介-公式設定例序文vueCli を使用してプロジェクトを開発したことのある方は、少しがっか...

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

WeChatアプレット+EChartsで動的更新プロセス記録を実現

序文最近、小さなプログラムでリアルタイムにチャートを更新するという要件に遭遇しました。最初は wx-...

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

Vue を使用して CSS トランジションとアニメーションを実装する方法

目次1. トランジションとアニメーションの違い2. Vueを使用して基本的なCSSトランジションとア...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...