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ページの読み込みと解析プロセスの詳細な紹介

推薦する

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

Vueルーティングはページステータスを復元する操作メソッドを返します

ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...

Windows オペレーティング システムでの Linux 仮想マシンのインストールと構成のチュートリアル

序文仕事では、Linux 環境で操作する必要があることがよくあります。ここでは、win10 システム...

JavaScript 正規表現の説明

目次1. 正規表現の作成2. 使用モード2.1 シンプルモードの使用2.2 特殊文字の使用3. 応用...

CSS3で蓮の花が咲くアニメーション効果を実現

まずは効果を見てみましょう:この効果は非常に華やかに見えますが、原理は複雑ではありません。1 枚の花...

MySQL の完全バックアップとクイックリカバリ方法

過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...

MAC での MYSQL5.7.17 接続失敗の問題と解決策

MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...

HTML ヘッド構造

以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...

vue で h5 側のアプリを開きます (Android か Apple かを判断します)

1. 開発環境 vue+vant 2. コンピュータシステム Windows 10 Profess...

フォーム要素属性の読み取り専用と無効の使用の比較

1) 適用範囲:読み取り専用:input[type="text"],input[...

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...

ホバードロップダウンメニューを実装するためのネイティブJS

JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...

HTML でのアンカーポイントの適用

アンカーポイントの設定<a name="トップ"></a>...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...