派手なカルーセル効果を実現するJavaScript

派手なカルーセル効果を実現するJavaScript

この記事では、JavaScriptで派手なカルーセル効果を実装する2つの方法を紹介します。具体的な内容は次のとおりです。

1つ目はボタン付きのシンプルなカルーセル

はじめに: 左ボタンと右ボタンでカルーセルを制御します。左ボタンをクリックすると前の画像に切り替わり、右ボタンをクリックすると次の画像に切り替わります。

HTML は次のとおりです。

<div class="box">
        <div class="imgbox">
            <a><img src="img/banner1.jpg" alt=""></a>
            <a><img src="img/banner2.jpg" alt=""></a>
            <a><img src="img/banner3.jpg" alt=""></a>
            <a><img src="img/banner4.jpg" alt=""></a>
            <a><img src="img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
</div>

CSSは次のとおりです。

.box{幅: 1000px;高さ: 300px;余白: 20px 自動;位置: 相対;オーバーフロー: 非表示;}
        .box .imgbox{}
        .imgbox a{幅: 1000px;高さ: 300px;位置: 絶対;左: 1000px;上: 0;}
        .imgbox a:nth-child(1){left:0;}
        .imgbox img{幅: 1000px;高さ: 300px;}

        .btns 入力{幅: 40px;高さ: 40px;位置: 絶対;上: 130px;境界線: なし;背景: rgba(200,200,200,0.5);}
        #左{左:0;}
        #右{右: 0;}}

js は次のとおりです。

クラスバナー{
        コンストラクタ(){
            左 = document.getElementById("左");
            要素の取得
            this.child = document.querySelectorAll(".imgbox a");

            // 入力中 this.iNow = 0;
            //進むには this.iPrev = this.child.length - 1;
        }
        初期化(){
            var that = this;
            this.left.addEventListener("クリック",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("クリック",function(){
                that.changeIndex(2);
            })
        }
        changeIndex(直接){
            if(直接 == 1){
                if (this.iNow == 0) {
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }それ以外{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }それ以外{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }それ以外{
                    this.iNow++;
                    // 移動先のインデックスは常に、入ってくるインデックス - 1 です
                    this.iPrev = this.iNow - 1;
                }
            }
            // インデックスに従って移動を開始します this.move(direct);
        }
        移動(直接){
            if(直接 == 1){
                // iPrev は 0 から 1000 まで
                this.child[this.iPrev].style.left = 0;
                移動(this.child[this.iPrev],{left:1000});
                // iNow は -1000 から 0 までの範囲になります
                this.child[this.iNow].style.left = -1000 + "px";
                移動(this.child[this.iNow],{left:0});
            }それ以外{
                
                this.child[this.iPrev].style.left = 0;
                移動(this.child[this.iPrev],{left:-1000});
                this.child[this.iNow].style.left = 1000 + "px";
                移動(this.child[this.iNow],{left:0});
            }
        }
    }

var b = 新しいバナー();
b.init();

2番目のタイプ:自動回転木馬

はじめに: 左右の 2 つのボタンで、画像の左右の切り替えを制御できます。下の数字のボタンをクリックすると、画像の番号に切り替わります。自動回転中に、マウスが入ると回転が停止し、マウスが離れると回転が継続します。

htm コードは次のとおりです。

<div class="box">
        <div class="imgbox">
            <a><img src="../img/banner1.jpg" alt=""></a>
            <a><img src="../img/banner2.jpg" alt=""></a>
            <a><img src="../img/banner3.jpg" alt=""></a>
            <a><img src="../img/banner4.jpg" alt=""></a>
            <a><img src="../img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
        <div class="list">
        </div>
</div>

CSS コードは次のとおりです。

.box{幅: 1000px;高さ: 300px;余白: 20px 自動;位置: 相対;オーバーフロー: 非表示;}
.box .imgbox{}
.imgbox a{幅: 1000px;高さ: 300px;位置: 絶対;左: 1000px;上: 0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{幅: 1000px;高さ: 300px;}

.btns 入力{幅: 40px;高さ: 40px;位置: 絶対;上: 130px;境界線: なし;背景: rgba(200,200,200,0.5);}
        #左{左:0;}
        #右{右: 0;}

.list{幅: 1000px;高さ: 30px;位置: absolute;左: 0;下: 0;表示: flex;背景: rgba(200,200,200,0.5);}
.list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list span.active{背景: 赤;色: #fff;}

js コードは次のとおりです。

クラスバナー{
        コンストラクタ(){
            左 = document.getElementById("左");
            要素の取得
            this.child = document.querySelectorAll(".imgbox a");
            this.list = document.querySelector(".list");
            this.box = document.querySelector(".box");

            this.iNow = 0;
            this.iPrev = this.child.length - 1;
        }
        初期化(){
            var that = this;
            this.left.addEventListener("クリック",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("クリック",function(){
                that.changeIndex(-1);
            })
            // L3. イベント委任バインディングイベント this.list.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "SPAN"){
                    // L4. イベントがトリガーされると、変更インデックスを実行し、ポイントの前にクリックされたスパンを that.listChangeIndex(tar); に渡します。
                }
            }
        }
        changeIndex(直接){
            if(直接 == 1){
                if (this.iNow == 0) {
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }それ以外{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }それ以外{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }それ以外{
                    this.iNow++;
                    this.iPrev = this.iNow - 1;
                }
            }
            this.move(直接移動)
        }
        移動(直接){
            // 左ボタンと右ボタンの状態に応じて: 左 1、右 -1
            // 乗算を使用します // 異なるボタンの方向を変更するには this.child[this.iPrev].style.left = 0;
            移動(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
            this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
            移動(this.child[this.iNow],{left:0});

            これをアクティブに設定します。
        }
        リストを作成します(){
            // L1. 写真の数に対応するスパンを作成し、番号を付けます var str = ``;
            for(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            this.list.innerHTML = str;

            // L2. デフォルトの現在の項目を設定する this.setActive();
        }
        setActive(){
            for(var i=0;i<this.list.children.length;i++){
                this.list.children[i].className = "";
            }
            this.list.children[this.iNow].className = "アクティブ";
        }
        リスト変更インデックス(tar){
            // L5. 出るインデックスと入るインデックスを決定します // 出るには this.iNow // 入るにはクリックされたスパンの数を取得します var index = parseInt(tar.getAttribute("index"));
            // console.log(this.iNow, インデックス);
            // L6-1. 方向を決定する if (index > this.iNow) {
                // L7-1. 左に移動 this.listMove(1,index);
            }
            // L6-2. 方向を決定する if(index < this.iNow){
                // L7-2. 右に移動 this.listMove(-1,index);
            }

            // L8. 現在クリックされているインデックスを次のインデックスとして設定します。this.iNow = index;

            // L9. 変更されたインデックスに従って現在の項目を設定します。this.setActive();
        }
        リスト移動(直接、インデックス){
            // this.iNow は歩きます // どこへ行くか、どこへ行くか this.child[this.iNow].style.left = 0;
            移動(this.child[this.iNow],{left:-1000 * direct})
            // インデックス // どこから入ってどこへ行くか
            this.child[index].style.left = 1000 * direct + "px";
            移動(this.child[index],{left:0});
        }
        自動再生(){
            var t = setInterval(()=>{
                this.changeIndex(-1);
            },2000)

            this.box.onmouseover = 関数(){
                クリア間隔(t);
            }

            var that = this;
            this.box.onmouseout = 関数(){
                t = setInterval(()=>{
                    that.changeIndex(-1);
                },2000)
            }
            
            // console.log(それ);
        }
    }


var b = 新しいバナー();
b.init();
b.createList();
b.autoPlay();

2 つのケースの移動 js はバッファリングされたモーションのパッケージであり、コードは次のとおりです。

関数move(ele,obj,cb){
    間隔をクリアします(ele.t);
    ele.t = setInterval(() => {
        // 状態が「タイマーをクリアできる」であると仮定します。var i = true;
        // オブジェクト内の情報はタイマーまで使用されないため、タイマー内で走査され、 // 事前に取得された属性とターゲット変数 for (var attr in obj) {
            if (attr == "不透明度") {
                var iNow = getStyle(ele,attr) * 100;
            }それ以外{
                var iNow = parseInt(getStyle(ele,attr));
            }
    
            speed = (obj[attr] - iNow)/10とします。
            速度 = 速度 < 0 ? Math.floor(速度) : Math.ceil(速度);
            // 1 つの属性がターゲットに到達すると停止しますが、これは誤りです // 停止するには、すべての属性がターゲットに到達する必要があります // 1 つの属性がターゲットに到達しない限り、停止してはいけません // 状態を使用してタイマーを停止するかどうかをマークします // 1 つの属性がターゲットに到達しない限り、タイマーはクリアしてはいけません if (iNow !== obj[attr]) {
                i = 偽;
            }
            if (attr == "不透明度") {
                ele.style.opacity = (iNow + 速度)/100;
            }それ以外{
                ele.style[attr] = iNow + 速度 + "px";
            }
        }
        // タイマーが実行されるたびにすべてのプロパティが実行された後も状態が true のままであれば、false に変更されていないことを意味します。false に変更されていない場合は、どのプロパティも終了に達していないため、状態は false のままであり、クリアされません if(i){
            間隔をクリアします(ele.t);
            // アニメーション終了時に実行する関数をユーザーが決定します。ユーザーがパラメータを渡さない場合は、デフォルトの判断を行います。if (cb) {
                関数 :
            }
            // cb && cb();
        }
    }, 30);
}

関数 getStyle(ele,attr){
    if(ele.currentStyle){
        ele.currentStyle[attr]を返します。
    }それ以外{
        getComputedStyle(ele,false)[attr]を返します。
    }
}

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

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

<<:  Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル

>>:  MySQL 結合テーブルクエリの基本操作 左結合のよくある落とし穴

推薦する

JavaScript で円形のプログレスバー効果を実装する

この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考まで...

MySQLサービスを削除する具体的な方法

MySQLは次のエラーを表示します「コントロール パネル -> 管理ツール -> サービ...

JavaScript 基礎シリーズ: 関数とメソッド

目次1. 関数とメソッドの違い2. 良い関数の書き方2.1 正確な命名2.1.1 関数の命名2.1....

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

MySQLのインデックスシステムがB+ツリーを使用する理由の分析

目次1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 3. インデック...

Vite+ElectronでVUE3デスクトップアプリケーションを素早く構築

目次1. はじめに2. Viteプロジェクトを作成する1. viteをインストールする2. プロジェ...

Linuxカーネルで中国語の文字を出力する方法

次のように、Windows/MacOS からログインした Linux の SSH ターミナルで簡単に...

Ubuntu 20.04 に Python 3 仮想環境をインストールする詳細なチュートリアル

以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

JavaScriptはeコマースプラットフォームの製品詳細を実装します

この記事では、電子商取引プラットフォームで商品の詳細を表示する一般的な例を紹介します。たとえば、ある...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

Nodeイベントループの包括的な理解

目次ノードイベントループイベントループ図メインスレッドイベントループタイマーキューの仕組み投票キュー...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明

ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...