JavaScript が Xiaomi のカルーセル効果を模倣

この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので、文章が下手かもしれません。無理なところがあれば指摘して修正してください。コードはすべて一番下にあります。繰り返しの書き方が多いです。時間があるときに、繰り返しのコードをまとめます。

透明グラデーションアニメーション効果について

たとえば、delayOpacity(OliArray[pre],0,-0.1);は、OliArray[pre]オブジェクトの透明度を0、速度を0.1に変換します。

関数delayOpacity(obj,target,speed){
        タイマーの間隔をクリアします。
        タイマー = setInterval(関数(){
            var old = getComputedStyle(obj,null)['不透明度']; 
            var newVal = +old + +speed; //+ は文字列を数値型に変換します if(parseInt(speed)>0 && newVal>=target){
                新しい値 = 1;
            }
            if(parseInt(speed)<0 && newVal<=target){
                新しい値 = 0;
            }
            obj.style.opacity = newVal; //グラデーション効果を生み出すために、オブジェクトの透明度に毎回新しい値を割り当てます if (newVal==target) {
                clearInterval(timer); //透明度値がターゲットの透明度値と同じになったらタイマーをオフにします}
        },100);
    }

自動回転の方法について

私のカルーセルには 4 つのスライドがありますが、5 つの画像を書きました。5 つ目は最初のものと同じです。目的は、透明度の変換をより合理的にし、最後のものから最初のものに突然変更されないようにすることです。グローバル変数 next は切り替え先のスライドを表し、pre は現在のスライドを表します。

関数autoPlay(){
        自動タイマー = setInterval(関数(){
            次へ++;
            プレ++;
            次 %= OliArray.length;
            pre %= OliArray.length;
            if(pre==OliArray.length-1){
                事前 = 0;
            }
            for(let i=0;i<OliArray.length;i++){
                if(i!=次){
                    OliArray[i].style.zIndex = 0;
                    /*最初の数枚の写真をクリックしても自動カルーセルが切り替わらない問題を解決します。
                    後の画像は前の画像の上に表示されるため、3番目の画像を再生すると、
                    最初の画像をクリックした後、カルーセルが自動的に表示されると、3番目の画像が2番目の画像の上に表示されるため、1番目から2番目の画像へのアニメーション効果はなく、画像は常に3番目の画像で停止します。そのため、表示する画像のレベルを1に設定し、他の画像のレベルを0に設定する必要があります* /
                }
                if(i!=pre)
                    OliArray[i].style.opacity = 0;
                if(i!=OliArray.length-1){
                    PointerArray[i].className = ""; //クリックすると、クリックされた原点を除く他のすべてのアクティブなスタイルがクリアされます}
            }
            OliArray[次].style.zIndex=1;
            delayOpacity(OliArray[pre],0,-0.1); //前の画像の透明度を1から0に変更します
            delayOpacity(OliArray[next],1,0.1); // 表示する画像の透明度を0から1に変更します
            if(next==OliArray.length-1) {
                次 = 0;
                OliArray[next].style.opacity = 1; // 最後の画像が表示されたら、ユーザーの目がそれほど明るくないため、最初の画像に回転するふりをするのではなく、すぐに最初の画像に切り替えます}
            PointerArray[next].className = "active";
        },3000);
    }

前の画像をクリックしてください

prevBanner.onclick = 関数(){
        //自動カルーセルのタイマーをクリアします。clearInterval(autoTimer);
        pre = next; //Pre は元々切り替えられた画像です next = next-1>=0? next-1:OliArray.length-2; //next は切り替えられる前の画像です for(let i=0;i<OliArray.length;i++){
            if(i!=次){
                OliArray[i].style.zIndex = 0;
            }
            if(i!=pre)
                OliArray[i].style.opacity = 0;
            if(i!=OliArray.length-1){
                ポインタ配列[i].className = "";
            }
        }
        OliArray[次].style.zIndex = 1;
        遅延不透明度(OliArray[pre],0,-0.1);
        遅延不透明度(OliArray[次]、1、0.1);
        if(next==OliArray.length-1) {
            次 = 0;
            OliArray[next].style.opacity = 1;
        }
        PointerArray[next].className = "active";
        前 = 次 - 1;
        //自動カルーセルをオンにする autoPlay();
    }

について次へをクリック

自動カルーセルに少し似ていますが、タイマーはありません（パッケージ関数に記述して後で変更できると思います）

nextBanner.onclick = 関数(){
        //自動カルーセルのタイマーをクリアします。clearInterval(autoTimer);
        次へ++;
        プレ++;
        次 %= OliArray.length;
        pre %= OliArray.length;
        if(pre==OliArray.length-1){
            事前 = 0;
        }
        for(let i=0;i<OliArray.length;i++){
            if(i!=次){
                OliArray[i].style.zIndex = 0;
            }
            if(i!=pre)
                OliArray[i].style.opacity = 0;
            if(i!=OliArray.length-1){
                ポインタ配列[i].className = "";
            }
        }
        OliArray[次].style.zIndex = 1;
        遅延不透明度(OliArray[pre],0,-0.1);
        遅延不透明度(OliArray[次]、1、0.1);
        if(next==OliArray.length-1) {
            次 = 0;
            OliArray[next].style.opacity = 1;
        }
        PointerArray[next].className = "active";
        //自動カルーセルをオンにする autoPlay();
    }

特定の原産地をクリックしてその原産地の画像に切り替える方法について

for(let i=0;i<PointerArray.length;i++){
        ポインタ配列[i].onclick = function(){
            //自動カルーセルのタイマーをクリアします。clearInterval(autoTimer);
            for(j=0;j<OliArray.length;j++){
                もし(j!=i){
                    OliArray[j].style.zIndex = 0;
                }
                if(j!=次)
                    OliArray[j].style.opacity = 0;
                if(j!=OliArray.length-1){
                    ポインタ配列[j].className = "";
                }
            }
            OliArray[i].style.zIndex=1;
            遅延不透明度(OliArray[次]、0、-0.1);
            遅延不透明度(OliArray[i],1,0.1);
            PointerArray[i].className = "アクティブ";
            pre = i - 1 == 0? OliArray.length-1:i-1;
            次 = i;
            //自動カルーセルをオンにする autoPlay();
        }
    }

HTML部分

<div class="banner-wapper">
        <div class="コンテナ">
            <div class="banner">
                <ul class="img-list">
                    <li>
                        <a href="#">
                            <img src="./img/1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/1.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <div class="ポインタ">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                <div class="前へ-次へ">
                    <a class="prev" href="javascript:;"></a>
                    <a class="next" href="javascript:;"></a>
                </div>
            </div>
        </div>
</div>

CSS部分

。バナー{
    位置: 相対的;
    高さ: 460ピクセル;
}
.banner .img-list li{
    位置: 絶対;
    不透明度: 0;
}
.banner-wapper .banner 画像{
    幅: 1226ピクセル;
    高さ: 460ピクセル;
    垂直方向の位置合わせ: 上;
}
.banner .img-list li:nth-child(1){
    不透明度: 1;
}
.ポインタ{
    zインデックス: 2;
    位置: 絶対;
    右: 30px;
    下: 20px;
}
.ポインタa{
    フロート: 左;
    幅: 6px;
    高さ: 6px;
    境界線: 2px rgba(255, 255, 255, 0.4) 実線;
    ボックスのサイズ: コンテンツボックス;
    マージン: 0 4px;
    境界線の半径: 50%;
    背景: rgba(0, 0, 0, 0.4);
}
.ポインター a:hover,
.ポインタ .アクティブ{
    境界線の色:rgba(0, 0, 0, 0.4);
    背景色: rgba(255, 255, 255, 0.4);
}
.prev-next{
    幅: 41ピクセル;
    高さ: 69px;
    位置: 絶対;
    上: 0;
    下部: 0;
    マージン: 自動 0;
    背景画像: url(../img/icon-slides.png);
}
.prev-next .prev{
    zインデックス: 2;
    左: 234px;
    背景位置: -84px 50%;
}
.prev-next .prev:hover{
    背景位置: 0 0;
}
.前へ-次へ.次へ{
    zインデックス: 2;
    右: 0;
    背景位置: -125px 50%;
}
.prev-next .next:hover{
    背景位置: -42px 50%;
}

js部分

window.onload = 関数(){
    var Oul = document.getElementsByClassName("img-list")[0];
    var OliArray = Oul.getElementsByTagName("li");
    var ポインタ = document.getElementsByClassName("ポインタ")[0];
    var PointerArray = ポインター.getElementsByTagName("a");
    var nextBanner = document.getElementsByClassName("next")[0];
    var prevBanner = document.getElementsByClassName("prev")[0];

    var timer、autoTimer、next = 0、pre = OliArray.length-1;
    PointerArray[0].className = "アクティブ";
    
    自動再生();
    // カルーセルをクリックします for(let i=0;i<PointerArray.length;i++){
        ポインタ配列[i].onclick = function(){
            //自動カルーセルのタイマーをクリアします。clearInterval(autoTimer);
            for(j=0;j<OliArray.length;j++){
                もし(j!=i){
                    OliArray[j].style.zIndex = 0;
                }
                if(j!=次)
                    OliArray[j].style.opacity = 0;
                if(j!=OliArray.length-1){
                    ポインタ配列[j].className = "";
                }
            }
            // コンソール.log(前、次、i)
            OliArray[i].style.zIndex=1;
            遅延不透明度(OliArray[次]、0、-0.1);
            遅延不透明度(OliArray[i],1,0.1);
            PointerArray[i].className = "アクティブ";
            pre = i - 1 == 0? OliArray.length-1:i-1;
            次 = i;
            //自動カルーセルをオンにする autoPlay();
        }
    }

    // 次のバナーをクリックします nextBanner.onclick = function(){
        //自動カルーセルのタイマーをクリアします。clearInterval(autoTimer);
        次へ++;
        プレ++;
        次 %= OliArray.length;
        pre %= OliArray.length;
        if(pre==OliArray.length-1){
            事前 = 0;
        }
        for(let i=0;i<OliArray.length;i++){
            if(i!=次){
                OliArray[i].style.zIndex = 0;
            }
            if(i!=pre)
                OliArray[i].style.opacity = 0;
            if(i!=OliArray.length-1){
                ポインタ配列[i].className = "";
            }
        }
        OliArray[次].style.zIndex = 1;
        遅延不透明度(OliArray[pre],0,-0.1);
        遅延不透明度(OliArray[次]、1、0.1);
        if(next==OliArray.length-1) {
            次 = 0;
            OliArray[next].style.opacity = 1;
        }
        PointerArray[next].className = "active";
        //自動カルーセルをオンにする autoPlay();
    }
    //前のバナーをクリックする prevBanner.onclick = function(){
        //自動カルーセルのタイマーをクリアします。clearInterval(autoTimer);
        前 = 次;
        次 = next-1>=0? next-1:OliArray.length-2;
        for(let i=0;i<OliArray.length;i++){
            if(i!=次){
                OliArray[i].style.zIndex = 0;
            }
            if(i!=pre)
                OliArray[i].style.opacity = 0;
            if(i!=OliArray.length-1){
                ポインタ配列[i].className = "";
            }
        }
        OliArray[次].style.zIndex = 1;
        遅延不透明度(OliArray[pre],0,-0.1);
        遅延不透明度(OliArray[次]、1、0.1);
        if(next==OliArray.length-1) {
            次 = 0;
            OliArray[next].style.opacity = 1;
        }
        PointerArray[next].className = "active";
        前 = 次 - 1;
        //自動カルーセルをオンにする autoPlay();
    }

    // 自動カルーセル関数 autoPlay(){
        自動タイマー = setInterval(関数(){
            次へ++;
            プレ++;
            次 %= OliArray.length;
            pre %= OliArray.length;
            if(pre==OliArray.length-1){
                事前 = 0;
            }
            for(let i=0;i<OliArray.length;i++){
                if(i!=次){
                    OliArray[i].style.zIndex = 0;
                }
                if(i!=pre)
                    OliArray[i].style.opacity = 0;
                if(i!=OliArray.length-1){
                    ポインタ配列[i].className = "";
                }
            }
            OliArray[次].style.zIndex=1;
            遅延不透明度(OliArray[pre],0,-0.1);
            遅延不透明度(OliArray[次]、1、0.1);
            if(next==OliArray.length-1) {
                次 = 0;
                OliArray[next].style.opacity = 1;
            }
            PointerArray[next].className = "active";
        },3000);
    }
    関数delayOpacity(obj,target,speed){
        タイマーの間隔をクリアします。
        タイマー = setInterval(関数(){
            var old = getComputedStyle(obj,null)['不透明度'];
            // console.log(getComputedStyle(obj,null)['opacity'])
            var newVal = +old + +speed;
            // コンソール.log(obj,newVal)
            if(parseInt(speed)>0 && newVal>=target){
                新しい値 = 1;
            }
            if(parseInt(speed)<0 && newVal<=target){
                新しい値 = 0;
            }
            obj.style.opacity = newVal;
            // console.log(getComputedStyle(obj,null)['opacity'])
            (newVal == ターゲット) の場合 {
                タイマーの間隔をクリアします。
            }
        },100);
    }
}

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

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