ブリージングカルーセルを実装するネイティブJS

ブリージングカルーセルを実装するネイティブJS

今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。

以下はコード実装です。コピーして貼り付けていただいて結構です。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <メタ文字セット="utf-8" />
    <title>ブリージングカルーセルを実装するためのネイティブ JS</title>
    <スタイル>
        ul {
            マージン: 0;
            左パディング: 0;
        }
 
        li {
            リストスタイル: なし;
        }
 
        画像 {
            境界線: なし;
        }
 
        #主要 {
            幅: 280ピクセル;
            高さ: 330ピクセル;
            オーバーフロー: 非表示;
            位置: 相対的;
            マージン: 20px 自動 0 自動;
        }
 
        #メインul {
            位置: 絶対;
            左: 0;
        }
 
        #メイン ul li {
            幅: 280ピクセル;
            高さ: 330ピクセル;
            フロート: 左;
            位置: 絶対;
            フィルター:アルファ(不透明度=0);
            不透明度: 0;
        }
 
        #ボタン{
            行の高さ: 14px;
            テキスト配置: 中央;
            背景: #eeeeee;
            幅: 280ピクセル;
            マージン: 10px 自動 0 自動;
            ディスプレイ: フレックス;
            flex-direction: 行;
            コンテンツの両端揃え: スペースを空ける;
            アイテムの位置を中央揃えにします。
        }
 
        #ボタン{
            表示: インラインブロック;
            幅: 14px;
            高さ: 14px;
            テキスト装飾: なし;
            行の高さ: 12px;
            テキスト配置: 中央;
            境界線の半径: 7px;
        }
 
        #btn a.index {
            背景色: #ccc;
        }
 
        #btn a.active {
            背景色: 赤;
        }
    </スタイル>
    <script type="text/javascript" src="js/move.js"></script>
    <スクリプト>
        window.onload = 関数(){
            var oMain = document.getElementById('main');
            var oUl = oMain.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
 
            var oBtn = document.getElementById('btn');
            var aA = oBtn.getElementsByTagName('a');
 
            var iNow = 1;
            var iNow2 = 1;
            var bBtn = true;
            var 数値 = 3;
            var タイマー = null;
 
            oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';
 
            aA[0].onclick = 関数(){
                もし(bBtn){
                    タイマーの間隔をクリアします。
                    タイマー = setInterval(autoPlay, 3000);
                    (var i = 0; i < aLi.length; i++) の場合 {
                        aLi[i].style.position = '相対';
                        aLi[i].style.filter = 'alpha(不透明度=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    iNow == 1の場合{
                        iNow = aLi.length;
                        aLi[aLi.length - 1].style.position = '相対';
                        aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
                    } それ以外 {
                        今--;
                    }
                    iNow2--;
                    実行();
                    bBtn = 偽;
                }
            };
            aA[aA.length - 1].onclick = 関数(){
                もし(bBtn){
                    タイマーの間隔をクリアします。
                    タイマー = setInterval(autoPlay, 3000);
                    (var i = 0; i < aLi.length; i++) の場合 {
                        aLi[i].style.position = '相対';
                        aLi[i].style.filter = 'alpha(不透明度=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    iNow == aLi.lengthの場合{
                        iNow = 1;
                        aLi[0].style.position = '相対';
                        aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
                    } それ以外 {
                        iNow++;
                    }
                    iNow2++;
                    実行();
                    bBtn = 偽;
                }
            };
 
            (var i = 1; i < aA.length - 1; i++) の場合 {
                aA[i].インデックス = i;
                aA[i].onclick = 関数(){
                    タイマーの間隔をクリアします。
                    タイマー = setInterval(autoPlay, 3000);
                    インデックス
                    インデックス
                    表示する();
                };
            };
 
            関数toRun() {
                (var i = 1; i < aA.length - 1; i++) の場合 {
                    aA[i].className = 'インデックス';
                }
                aA[iNow].className = 'アクティブ';
 
                startMove(oUl, { 左: -(iNow2 - 1) * aLi[0].offsetWidth }, 関数 () {
                    iNow == 1の場合{
                        aLi[0].style.position = '相対';
                        aLi[0].style.left = 0;
                        oUl.style.left = 0;
                        1 を返します。
                    } そうでない場合 (iNow == aLi.length) {
                        aLi[aLi.length - 1].style.position = '相対';
                        aLi[aLi.length - 1].style.left = 0;
                        oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
                        iNow2 = aLi.長さ;
                    }
 
                    (var i = 0; i < aLi.length; i++) の場合 {
                        aLi[i].style.position = '絶対';
                        aLi[i].style.filter = 'alpha(不透明度=0)';
                        aLi[i].style.opacity = 0;
                    }
                    oUl.style.left = 0;
                    aLi[iNow2 - 1].style.zIndex = num++;
                    aLi[iNow2 - 1].style.filter = 'alpha(不透明度=100)';
                    aLi[iNow2 - 1].style.opacity = 1;
 
                    bBtn = true;
                });
            };
 
            関数toShow() {
                (var i = 1; i < aA.length - 1; i++) の場合 {
                    aA[i].className = 'インデックス';
                }
                (var i = 0; i < aLi.length; i++) の場合 {
                    startMove(aLi[i], { 不透明度: 0 });
                }
                aA[iNow].className = 'アクティブ';
                startMove(aLi[iNow - 1], { 不透明度: 100 }, 関数() {
                    aLi[iNow - 1].style.zIndex = num++;
 
                });
            }
 
            タイマー = setInterval(autoPlay, 3000);
 
            関数autoPlay() {
                iNow == aLi.lengthの場合{
                    iNow = 1;
                    1 を返します。
                } それ以外 {
                    iNow++;
                    iNow2++;
                }
 
                表示する();
            }
        };
    </スクリプト>
</head>
 
<本文>
    <div id="メイン">
        <ul>
            <li style="z-index:2; filter:alpha(opacity=100); opacity:1;">
                <あ>
                    <img src="images/0.jpg" />
                </a>
            </li>
            <li>
                <あ>
                    <img src="images/1.jpg" />
                </a>
            </li>
            <li>
                <あ>
                    <img src="images/2.jpg" />
                </a>
            </li>
            <li>
                <あ>
                    <img src="images/3.jpg" />
                </a>
            </li>
        </ul>
    </div>
    <div id="btn">
        <a class="prev" href="javascript:;">
            <a class="active" href="javascript:;">
        </a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="next" href="javascript:;">></a>
    </div>
</本文>
 
</html>

以下は、上記のコードで紹介した move.js の最も重要な移動関数のコードです。

関数 startMove(obj, json, fnEnd) {
    タイマー間隔をクリアします。
    obj.timer = setInterval(関数() {
        doMove(obj、json、fnEnd);
    }, 30);
}
関数doMove(obj, json, fnEnd) {
    var iCur = 0;
    var 属性 = null;
    var bStop = true;
    for (json 内の属性) {
        属性 == '不透明度' の場合 {
            (parseInt(100 * getStyle(obj、attr))== 0)の場合{
                iCur = parseInt(100 * getStyle(obj, attr));
            } それ以外 {
                iCur = parseInt(100 * getStyle(obj, attr)) || 100;
            }
        } それ以外 {
            iCur = parseInt(getStyle(obj, attr)) || 0;
        }
        var iSpeed ​​= (json[attr] - iCur) / 5;
        iSpeed ​​= (iSpeed ​​> 0) ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        json[attr] が iCur の場合
            bStop = false;
        }
        属性 == '不透明度' の場合 {
            obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
            obj.style.opacity = (iCur + iSpeed) / 100;
        } それ以外 {
            obj.style[attr] = iCur + iSpeed ​​+ 'px';
        }
    }
    if (bStop) {
        タイマー間隔をクリアします。
        if (fnEnd) {
            fnEnd.call(obj);
        }
    }
}
関数stopMove(obj) {
    タイマー間隔をクリアします。
}
関数 getStyle(obj, attr) {
    (obj.currentStyle)の場合{
        obj.currentStyle[attr]を返します。
    } それ以外 {
        getComputedStyle(obj)[attr]を返します。
    }
}

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

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

<<:  Docker プラグインを使用して IDEA のクラウド サーバーにプロジェクトをリモートでデプロイする方法

>>:  MySQL Null は 5 つの問題を引き起こす可能性があります (すべて致命的)

推薦する

中国語ウェブコンテンツを紹介する10の経験

<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...

MySQL における or、in、union、インデックス最適化の詳細な分析

この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

HTML コマンドラインインターフェースの実装

HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

CSS 要素を表示および非表示にする 9 つの方法

Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...

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

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

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

MySQL での SQL モードの表示と設定の詳細な説明

MySQL での SQL モードの表示と設定MySQL はさまざまなモードで実行でき、さまざまなシナ...

リクエスト数を制限するために Ajax 同時リクエストを実装するために js を使用するサンプル コード

問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...

JavaScript 正規表現の説明

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

Ubuntu 20.04 aptの国内ソースを変更する方法

UPD 2020.2.26 現在、Ubuntu 20.04 LTSはまだリリースされていないため、チ...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...