層疊輪播圖的簡易制作

　　之前做過很多不同樣式的輪播圖，不是通過改變left值使圖片左右移動的，就是改變透明度實現輪播圖的，偶然在網易雲上看到了層疊輪播圖，它轉換圖片的方式和其他輪播圖有些不同，我從來沒做過這種輪播圖，思考了很久該用什么方法做，終於做出來了一個簡陋的成品。由於輪播圖的圖片是網上找來的，所以我做了模糊處理，用清晰的圖片效果更好，這里是我的一個演示（沒有錄制鼠標）：

 

 

 思路和方法

---

 

我所能想出的最簡單的方法就是先給輪播圖中的幾張圖片特定的class值，再通過改變圖片class的值來改變他們的位置

話不多說，上代碼：

html

 

<div class="img">
    <div class="whole">
        <div class="roll-img">
            <span class="last"><</span>
            <ul id="ul">
                <li class="left"><img src="img/1.jpg" alt=""><div></div></li>
                <li class="center"><img src="img/2.jpg" alt=""><div></div></li>
                <li class="right"><img src="img/3.jpg" alt=""><div></div></li>
                <li class="after1"><img src="img/4.jpg" alt=""><div></div></li>
                <li class="after2"><img src="img/5.jpg" alt=""><div></div></li>
                <li class="after3"><img src="img/6.jpg" alt=""><div></div></li>
            </ul>
            <span class="next">></span>
        </div>
    </div>
    <div class="list">
        <span class="btn"></span>
        <span class="btn" style="background: red;"></span>
        <span class="btn"></span>
        <span class="btn"></span>
        <span class="btn"></span>
        <span class="btn"></span>
    </div>
</div>

 

css

 

*{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .img{
            width: 100%;
            height: 300px;
            margin-top: 100px;
        }
        .whole{
            width: 50%;
            height: 100%;
            margin: 0 auto;
        }
        .roll-img{
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
        }
        .roll-img ul li{
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .left{
            left:-300px;
            transform: scale(0.8);
            z-index: 4;
            background: rgb(0,0,0);
            transition: all 0.5s ease;
        }
        .center{
            z-index: 6;
            left: 0;
            top: 0;
            bottom: 10%;
            transition: all 0.5s ease;
        }
        .right{
            left:300px;
            transform: scale(0.8);
            z-index: 4;
            background: rgb(0,0,0);
            transition: all 0.5s ease;
        }
        .left div,.right div{
            z-index: 5;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.3s ease;
        }
        .after1,.after2,.after3{
            z-index: 3;
            left: 0;
            top: 0;
            visibility: hidden;
            transform: scale(0);
        }
        .last,.next{
            position: absolute;
            z-index: 10;
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255,255,255,0.7);
            border-radius: 50px;
            font-size: 50px;
            font-weight: bold;
            text-align: center;
            line-height: 45px;
            cursor: pointer;
            top:40%;
            color: rgba(255,255,255,0.6);
            display: none;
        }
        .list{
            width: 30%;
            height: 5px;
            display: flex;
            margin: 0 auto;
            margin-top: 20px;
        }
        .btn{
            transition: all 0.3s ease;
            flex: 1;
            background: rgb(244,244,244);
        }
        .btn:not(:first-child){
            margin-left: 20px;
        }
        .last{
            left:-230px;
        }
        .next{
            right: -230px;
        }

 

為了使效果更加流暢，好看，我加了許多相關代碼

因為是層疊輪播，顧名思義就是每張圖片都有屬於它的一層空間，這樣在輪播的時候才能體現出它的層次感，於是我設置了z-index屬性，transition屬性可以讓動畫變得非常自然，如果用js定時器來做會略顯生硬，那么這樣的效果就和網易雲的效果比較類似了（有些效果僅靠我現在所學並不能做出來）

請注意，重點來了！

html和css都做好了，如何來做js使得圖片產生輪播效果呢？

javascript

 

let classes = ['left','center','right','after1','after2','after3'];
let timer=setInterval(function(){
    before();
},5000);
function before(){
    for(let i=0;i<classes.length;i++){
        $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
    }
    let last = classes.pop();
    classes.unshift(last);
    for(let i=0;i<classes.length;i++){
        $('#ul>li:eq('+i+')').attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($('#ul>li:eq('+i+')').attr("class")=='center'){
            $('.btn:eq('+i+')').css("background","red");
        }
    }
}
function after(){
    for(let i=0;i<classes.length;i++){
        $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
    }
    let first = classes.shift();
    classes.push(first);
    for(let i=0;i<classes.length;i++){
        $('#ul>li:eq('+i+')').attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($('#ul>li:eq('+i+')').attr("class")=='center'){
            $('.btn:eq('+i+')').css("background","red");
        }
    }
}
for(let i=0;i<classes.length;i++){
    (function(i){
        $('#ul>li:eq('+i+')').click(function(){
            if($('#ul>li:eq('+i+')').attr("class")=="left"){
                after();
            }else if($('#ul>li:eq('+i+')').attr("class")=="right"){
                before();
            }else{
                return false;
            }
        });
        $('.btn:eq('+i+')').mouseover(function(){
            $('.btn:eq('+i+')').css("background","red");
            clearInterval(timer);
            while(classes[i]!='center'){
                before();
            }
        });
        $('.btn:eq('+i+')').mouseout(function(){
            $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
            clearInterval(timer);
            timer=setInterval(function(){
                before();
            },5000);
        });
    })(i);
}

$('.last').click(function(){
    clearInterval(timer);
    before();
    timer=setInterval(function(){
        before();
    },5000);
});
$('.next').click(function(){
    clearInterval(timer);
    after();
    timer=setInterval(function(){
        before();
    },5000);
});
$('.img').mouseover(function(){
    $('.last,.next').css("display","block");
    clearInterval(timer);
});
$('.img').mouseout(function(){
    $('.last,.next').css("display","none");
    clearInterval(timer);
    timer=setInterval(function(){
        before();
    },5000);
});

 

以上是完整的js代碼，下面我分開講解

 

我設置了兩個按鈕，一個.last，另一個.next，當我按下它們圖片就會左右滾動，實現它們很簡單： 

 

let classes = ['left','center','right','after1','after2','after3'];

 

先將輪播圖中所有對象的類名都放在一個數組中，我放了六張圖，所以有六個類名，現在試想一下，假如我點擊next，那么第二張圖就會跑到第一張圖的位置上，同樣第一張圖會跑到最后一張圖的位置上去，點擊last剛好相反，最后一張圖會跑到第一張圖的位置上。

function before(){
    for(let i=0;i<classes.length;i++){
        $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
    }
    let last = classes.pop();
    classes.unshift(last);
    for(let i=0;i<classes.length;i++){
        $('#ul>li:eq('+i+')').attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($('#ul>li:eq('+i+')').attr("class")=='center'){
            $('.btn:eq('+i+')').css("background","red");
        }
    }
}
function after(){
    for(let i=0;i<classes.length;i++){
        $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
    }
    let first = classes.shift();
    classes.push(first);
    for(let i=0;i<classes.length;i++){
        $('#ul>li:eq('+i+')').attr("class",classes[i]);
    }
    for(let i=0;i<classes.length;i++){
        if($('#ul>li:eq('+i+')').attr("class")=='center'){
            $('.btn:eq('+i+')').css("background","red");
        }
    }
}

用pop()取出數組最后一個元素，再用unshift()把它放到數組前面，shift()取出數組開頭元素，再用push()把它放到數組后面，就搞定了（其他代碼先不做解釋）

下面要做的就是定時器了，不用操作也能使圖片自行滾動起來：

let timer=setInterval(function(){
    before();
},5000);
$('.last').click(function(){
    clearInterval(timer);
    before();
    timer=setInterval(function(){
        before();
    },5000);
});
$('.next').click(function(){
    clearInterval(timer);
    after();
    timer=setInterval(function(){
        before();
    },5000);
});

首先設置一個定時器timer，每隔五秒執行一次，當鼠標點擊按鈕時，停止計時器，在開啟，使得計時重新開始，這樣就消除了定時器沖突

但這樣還是遠遠不夠的，不光點按鈕可以實現左右滾動，點左右兩邊的圖片都是可以滾動的

 

for(let i=0;i<classes.length;i++){
    (function(i){
        $('#ul>li:eq('+i+')').click(function(){
            if($('#ul>li:eq('+i+')').attr("class")=="left"){
                after();
            }else if($('#ul>li:eq('+i+')').attr("class")=="right"){
                before();
            }else{
                return false;
            }
        });
        $('.btn:eq('+i+')').mouseover(function(){
            $('.btn:eq('+i+')').css("background","red");
            clearInterval(timer);
            while(classes[i]!='center'){
                before();
            }
        });
        $('.btn:eq('+i+')').mouseout(function(){
            $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
            clearInterval(timer);
            timer=setInterval(function(){
                before();
            },5000);
        });
    })(i);
}

 

通過判斷點擊圖片的class值來決定向左滾動還是向右滾動，點擊正中間的圖片無效

接下來當鼠標移入移出的時候，兩個按鈕.last和.next會再顯示和不顯示兩個屬性之間切換，當鼠標移入時，定時器停止，移出時又重新開始

$('.img').mouseover(function(){
    $('.last,.next').css("display","block");
    clearInterval(timer);
});
$('.img').mouseout(function(){
    $('.last,.next').css("display","none");
    clearInterval(timer);
    timer=setInterval(function(){
        before();
    },5000);
});

輪播圖的下面有六個方塊，哪個圖片在正中間，哪個方塊就是紅色的，這個在上面幾個js代碼中已經寫出來了

然后我們要使得鼠標放到哪個方塊上，輪播圖就跳到對應的圖片，停止計時器，同時其他圖片在數組中的位置也不會改變，鼠標移出方塊之后啟動計時器

 

 $('.btn:eq('+i+')').mouseover(function(){
            $('.btn:eq('+i+')').css("background","red");
            clearInterval(timer);
            while(classes[i]!='center'){
                before();
            }
        });
        $('.btn:eq('+i+')').mouseout(function(){
            $('.btn:eq('+i+')').css("background","rgb(244,244,244)");
            clearInterval(timer);
            timer=setInterval(function(){
                before();
            },5000);
        });

 

這里我用了while循環，如果我們放到的方塊對應的圖片不在中心，就開始循環調用before函數，直到圖片的類名等於'center'，也就是正中心的位置

 

這樣我們就完成了層疊輪播圖的所有基本功能，除了樣式長得不太像網易雲的之外，網易雲輪播圖該有的我們都有了。