ブリージングカルーセルを実装するネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません: