カルーセル効果を作成するためのjs

カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイントがたくさんあるからです。以下はカルーセルの作り方を学ぶプロセスです。

困難:

1. 以下の対応する円と画像を動的に自動生成する方法
2. 下の円を絵に合わせる方法
3. 前のページと次のページのボックスが移動する距離
4. 画像切り替え時のフェードアウトアニメーション効果
5. スロットルバルブの概念

効果:

コード:

<!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>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
 
        {
            テキスト装飾: なし;
            色: 白;
            行の高さ: 50px;
            テキスト配置: 中央;
        }
 
        li {
            リストスタイル: なし;
        }
 
        .tb-プロモーション {
            位置: 相対的;
            幅: 700ピクセル;
            高さ: 300px;
            マージン: 自動;
            オーバーフロー: 非表示;
        }
 
        .tb-プロモ .imgg {
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 3000ピクセル;
        }
 
        .tb-promo .imgg li {
            フロート: 左;
 
 
        }
 
        .tb-promo .imgg li img {
            幅: 700ピクセル;
            高さ: 300px;
        }
 
        .tb-プロモ .prev {
            表示: なし;
            位置: 絶対;
            上: 125px;
            左: 0;
            幅: 25px;
            高さ: 50px;
            背景色: rgba(0, 0, 0, 0.2);
            右上の境界線の半径: 25px;
            右下の境界線の半径: 25px;
            zインデックス: 999;
        }
 
        .tb-promo .prev:hover {
            背景色: rgba(0, 0, 0, 0.5);
        }
 
        .tb-プロモ .next {
            表示: なし;
            位置: 絶対;
            上: 125px;
            右: 0;
            幅: 25px;
            高さ: 50px;
            背景色: rgba(0, 0, 0, 0.2);
            左上の境界線の半径: 25px;
            左下の境界線の半径: 25px;
            zインデックス: 999;
        }
 
        .tb-promo .next:hover {
            背景色: rgba(0, 0, 0, 0.5);
        }
 
        .tb-プロモ .プロモ-nav {
            位置: 絶対;
            上: 270px;
            左: 50%;
            左マージン: -40px;
 
            高さ: 25px;
 
        }
 
        .tb-promo .promo-nav li {
            フロート: 左;
            幅: 16px;
            高さ: 16px;
            背景色: 白;
            境界線の半径: 8px;
            マージン: 4px;
 
 
        }
 
        .tb-プロモ .プロモnav .one {
 
            背景色: トマト;
        }
    </スタイル>
</head>
 
<本文>
    <div class="tb-promo">
 
        <a href="javascript:;" class="prev"><</a>
                <a href="javascript:;" class="next">></a>
                <ul class="imgg">
                    <li><img src="./61.jpeg" alt=""></li>
                    <li><img src="./62.jpeg" alt=""></li>
                    <li><img src="./63.jpeg" alt=""></li>
 
                </ul>
                <ol class="promo-nav">
 
 
 
                </ol>
    </div>
    <スクリプト>
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var tbpromo = document.querySelector('.tb-promo');
        var ul = document.querySelector('ul');
        var ol = document.querySelector('ol');
        //アニメーション関数 function animate(obj, target) {
            clearInterval(obj.timer); // 複数回のクリックを防ぐために呼び出します obj.timer = setInterval(function () {
                var ステップ = (ターゲット - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); // 正と負の値を丸める ​​if (obj.offsetLeft == target) {
                    タイマー間隔をクリアします。
                } それ以外 {
                    obj.style.left = obj.offsetLeft + ステップ + 'px';
                }
            }, 10)
        }
 
        // 動的なナビゲーション サークルを生成します var tbpromWidth = tbpromo.offsetWidth;
        (var i = 0; i < ul.children.length; i++) の場合 {
            var li = document.createElement('li');
            ol.appendChild(li);
            //カスタム属性を通じてインデックス番号を記録します li.setAttribute('index', i);
            //円の色の変更を記述するための独自のアイデア li.addEventListener('click', function () {
                // すべての円の色をクリアします for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'one';
 
                var index = this.getAttribute('index');
                // li をクリックし、li のインデックス番号をコントロール変数に割り当てます。num = index;
                円=インデックス;
                アニメーション化(ul, -index * tbpromWidth);
 
 
            })
            ol.children[0].className = 'one';
        }
        //最初の画像 li を複製し、シームレスに切り替えるために最後に配置します。var frist = ul.children[0].cloneNode(true);
        ul.appendChild(frist);
 
 
        //次のページと前のページを非表示にして表示する tbpromo.addEventListener('mouseenter', function () {
            prev.style.display = 'ブロック';
            next.style.display = 'ブロック';
            タイマーの間隔をクリアします。
            timer=0; // タイマー変数をクリアする })
        tbpromo.addEventListener('mouseleave', 関数() {
            prev.style.display = 'なし';
            next.style.display = 'なし';
            タイマー = setInterval(関数() {
            next.click(); // クリックイベントを手動で呼び出す}, 1500)
 
        })
 
        //次の前のアニメーション var num = 0;
        // 制御円 var circle = 0;
        //スロットルバルブ変数 var flag=true;
        
        //次のページ next.addEventListener('click', function () {
           
                //最後はulを判断してleftを0に戻す
            num == (ul.children.length - 1) の場合 {
                ul.style.left = 0;
                数値 = 0;
            }
            
                数値++;
                アニメーション化(ul, -num * tbpromWidth);
                サークル++;
                (円 == 3)の場合{
                    円 = 0;
                }
                (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'one';
           
            
        })
        //前のページ prev.addEventListener('click', function () {
            
            数値 == 0 の場合
                num = ul.children.length-1;
                ul.style.left = -num*tbpromWidth+'px';
                
            }
            それ以外 {
                数値--;
                アニメーション化(ul, -num * tbpromWidth);
                丸 - ;
                (円<0)の場合{
                    円 = 2;
                }
                (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[circle].className = 'one';
            }
        })
        //自動再生 var timer = setInterval (function () {
            next.click(); // クリックイベントを手動で呼び出す}, 2000)
    </スクリプト>
</本文>
 
</html>

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

以下もご興味があるかもしれません:
  • カルーセル例の JS 実装
  • JS でカルーセル効果を実現する 3 つの簡単な方法
  • 3Dカルーセル効果を実現するjs
  • カルーセル効果を実現するための純粋なjs
  • ブリージングカルーセルを実装するネイティブJS
  • JavaScript が Xiaomi のカルーセル効果を模倣
  • JavaScriptカルーセルの実装について

<<:  Docker-compose インストール db2 データベース操作

>>:  MySQLクエリ条件のnot inとinの違いと理由

推薦する

HTMLとは何ですか?

HTML 開発の歴史: HTML は英語で Hypertext Marked Language の...

nginxリバースプロキシを使用するときに長時間接続を維持する方法

・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...

MySQL パーティション関数の詳細な説明と例の分析

まず、データベース パーティショニングとは何でしょうか?以前、MySQL のテーブル パーティショニ...

LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

DockerがMySQL構成実装プロセスを開始

目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

vue3 における vuex と pinia の落とし穴

目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...

CentOS8 ネットワークカード設定ファイル

1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...

MySQL データベースのバックアップとリカバリの実装コード

データベースのバックアップ #文法: # mysqldump -h server-u usernam...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...

JS変数ストレージのディープコピーとシャローコピーの詳しい説明

目次可変タイプとストレージスペーススタックメモリとヒープメモリ基本的なデータ型参照タイプグラフィック...

Dockerイメージのローカル移行の実装

最近 Docker を勉強しているのですが、よく問題に遭遇します。Docker イメージをダウンロー...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...

Azure Container Registry を使用してイメージを保存する際の問題

Azure Container Registry は、Docker Registry 2.0 仕様に...