JavaScriptカルーセルの実装について

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡単に学べる事例を書いていきます! !

ルールはこれまでと同じですが、実装効果を見てみましょう。 !

カルーセルの作成方法を学ぶための最初のステップは、画像を準備し、ul 内の li でそれらをラップし、li にフロートを与えて 1 行に表示されるようにすることです。ただし、ul の幅を十分に広くするように注意してください。 !

さて、HTMLとCSSのコードは次のとおりです(ファイル名:index.html)

<!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>
    <script src="animate.js"></script>
    <script src="slideshow.js"></script>
    <スタイル>
        体 {
            背景色: rgb(151, 147, 147);
        }
 
        * {
            マージン: 0;
            パディング: 0;
        }
 
        div {
            オーバーフロー: 非表示;
            位置: 相対的;
            幅: 500ピクセル;
            高さ: 500px;
            背景色: スカイブルー;
            マージン: 20px 自動;
        }
 
        ul {
            リストスタイル: なし;
        }
 
        .img {
            幅: 600%;
            位置: 絶対;
            左: 0;
        }
 
        li {
            フロート: 左;
        }
 
        画像 {
            幅: 500ピクセル;
            高さ: 500px;
        }
 
        .yuan>li {
            カーソル: ポインタ;
            幅: 10px;
            高さ: 10px;
            背景色: rgb(190, 185, 185);
            境界線の半径: 50%;
            マージン: 0 5px;
            境界線: 1px実線rgb(119, 114, 114);
        }
 
        。元
            位置: 絶対;
            下: 10px;
            左: 50%;
            変換: translateX(-50%);
        }
 
        .yuan .color {
            背景色: rgb(228, 135, 135);
        }
 
        {
            テキスト装飾: なし;
            色: 黒;
            背景色: rgb(112, 111, 111);
            表示: インラインブロック;
            幅: 30ピクセル;
            高さ: 30px;
            テキスト配置: 中央;
            行の高さ: 30px;
            位置: 絶対;
            上位: 50%;
            変換: translateY(-50%);
            表示: なし;
        }
 
        。左 {
            左: 0;
        }
 
        。右 {
            右: 0;
        }
    </スタイル>
</head>
 
<本文>
    <div class="box">
        <ul class="img">
            <li><img src="images/1.webp" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.webp" alt=""></li>
            <li><img src="images/4.webp" alt=""></li>
            <li><img src="images/5.webp" alt=""></li>
        </ul>
        <a href="JavaScript:;" rel="外部nofollow" rel="外部nofollow" class="left">&lt;</a>
        <a href="JavaScript:;" rel="外部nofollow" rel="外部nofollow" class="right">></a>
        <ul class="元"></ul>
    </div>
</本文>
 
</html>

このように書くと、基本的なアウトラインが完成します。

次のステップは、動かすことです。画像を動かすにはどうしたらよいか考えてみましょう。学んだアニメーション効果でしょうか? これらすべての場所で、画像を切り替える効果を実現するためにスローモーション アニメーションを使用する必要があります。js コードが多数あるため、コードをカプセル化するために新しい js ファイルを作成する必要があります。

以下はカプセル化された js コードです (ファイル名: slideshow.js)

window.addEventListener('load', 関数() {
    var img = document.querySelector('.img');
    var yuan = document.querySelector('.yuan');
    var box = document.querySelector('.box');
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var imgwidth = box.offsetWidth; //ボックスの幅(画像の幅)を取得します
    // マウスがトリガーされた後に画像の自動スクロールを停止します box.addEventListener('mouseenter', function () {
        left.style.display = 'ブロック';
        right.style.display = 'ブロック';
        タイマーの間隔をクリアします。
    })
    // マウスを離すと画像の自動スクロールがトリガーされ、再度トリガーされます box.addEventListener('mouseleave', function () {
        left.style.display = 'なし';
        right.style.display = 'なし';
        タイマー = setInterval(関数() {
            右クリック();
        }, 2000)
    })
    // 図に従って次のドットを追加します for (var i = 0; i < img.children.length; i++) {
        var li = document.createElement('li');
        yuan.appendChild(li);
        li.setAttribute('日付インデックス', i);
        li.addEventListener('クリック', 関数() {
            (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            this.className = '色';
            var index = this.getAttribute('date-index');
            var imgwidth = box.offsetWidth;
            // アニメーション化(obj,target,function(){})
            アニメーション化(img, -index * imgwidth);
            nums = インデックス;
            色 = インデックス;
        })
    }
    // デフォルトでは、最初のドットの色は yuan.children[0].className = 'color' です。
    var 数値 = 0;
    var 色 = 0;
    // シームレススクロールを準備するために最初の画像を最後にコピーします。var li = img.children[0].cloneNode(true);
    img.appendChild(li);
    var フラグ = true;
    // 右側のボタン、次のボタンに切り替えると、ドットが一緒に変化しますright.addEventListener('click', function () {
        if (フラグ) {
            フラグ = false;
            if (nums == img.children.length - 1) {
                数値 = 0;
                左から0まで
            }
            数値++;
            アニメーション(画像、-nums * 画像幅、関数() {
                フラグ = true;
            });
            色++;
            if (colors == yuan.children.length) {
                色 = 0;
            }
            (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // 左ボタンが次のボタンに切り替わり、ドットも一緒に変化しますleft.addEventListener('click', function () {
        if (フラグ) {
            フラグ = false;
            (数値 == 0)の場合{
                nums = img.children.length - 1;
                img.style.left = -nums * imgwidth + 'px';
            }
            数字--;
            色 - ;
            アニメーション(画像、-nums * 画像幅、関数() {
                フラグ = true;
            });
            (色<0)の場合{
                色 = yuan.children.length - 1;
            }
            // 色 == 0 の場合 {
            // colors = yuan.children.length;
            // }
            // 色--;
            (var j = 0; j < yuan.children.length; j++) {
                yuan.children[j].className = '';
            }
            yuan.children[colors].className = 'color';
        }
    })
    // マウスが画像上を通過しなくても自動的にスクロールします var timer = setInterval(function () {
        右クリック();
    }, 2000)
})


ここで重要な点があります。アニメーション効果なしで動かすにはどうすればよいのでしょうか。将来他のケースを書くときに直接参照できるように、js ファイルを別途カプセル化しました。

コードは以下のとおりです(ファイル名:animate.js)

function animate(obj, target, callback) { // 移動するオブジェクト(移動する人)、移動先、コールバック関数 // 最初に前のタイマーをクリアし、現在のタイマーのみを保持して実行します clearInterval(obj.timer);
    obj.timer = setInterval(関数() {
        // ステップ長をタイマーに書き込みます var step = (target - obj.offsetLeft) / 10; // ステップ長の式: (ターゲット位置 - 現在の位置) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //ステップの長さを整数に変更します。小数点は使用せず、正の数は切り上げ、負の数は切り捨てます。if (obj.offsetLeft == target) {
            clearInterval(obj.timer) //アニメーションを停止し、基本的にタイマーを停止します if (callback) {
                callback(); //タイマーの最後にコールバック関数を記述します}
        }
        //ステップ長は、速い速度から遅い速度に減速する効果を実現するために徐々に減少する値です。obj.style.left = obj.offsetLeft + step + 'px';
    },15)
}


基本的に、すべてがコメント付きで明確に書かれているので、すべてのステップを理解できるはずです。

JavaScriptカルーセルの実装に関する記事はこれで終わりです。カルーセルの実装についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

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

<<:  12個のJavascriptテーブルコントロール(DataGrid)が整理されています

>>:  HTMLページの読み込みと解析プロセスの詳細な紹介

推薦する

vuex の補助関数 mapGetters の基本的な使い方の詳細な説明

mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...

CSSをインポートする方法は何ですか?linkと@importの違いは何ですか?選択方法

Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...

JSは検証コードのランダム生成を実装します

この記事の例では、検証コードのランダム生成を実現するためのJSの具体的なコードを参考までに共有してい...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...

MySQL 8.0.13 で日付を 0000-00-00 00:00:00 に設定すると発生する問題を解決する

データベース操作を学び始めたばかりです。今日、データを保存していたところ、エラーが発生していることに...

登録ページを実装するためのJS、CSS、HTML

HTML と CSS で実装された登録ページ テンプレート。早速、コードを見てみましょう。更新: ...

JavaScript で DOM 要素を監視する MutationObServer の詳細

1. 基本的な使い方これは MutationObserver コンストラクターを通じてインスタンス化...

フォームで完全な選択または逆選択効果を実現する JavaScript

この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参...

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する 'axios' から axios をインポートします。...

Linux で top コマンドを使用する際のヒント

まず、top のいくつかのフィールドの意味を紹介します。 VIRT:仮想メモリ使用量1. プロセスが...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

エラー 1045 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されました (パスワード使用: YES) 実用的な解決策

昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...