记录一个轮播图的实现思路

走马灯

效果展示

由于本人不擅长制作gif，所以把效果放在了codePen中

codePen效果展示

用到的技术

• CSS3
  • transform
  • z-index
  • opacity
  • translation
• Js
  • Array
    • pop
    • unshift
    • shift
    • push
  • Object
  • winidow.getComputedStyle()

实现思路

首先使用CSS将轮播图布局完毕，其次使用js读取每个item的CSS样式，并存储在对象中，最后将每个对象都存储在Js的数组中

HTML

	<div class="wrapper">
        <div class="loop-wrapper">
            <div class="loop-item">
                1
            </div>
            <div class="loop-item">
                2
            </div>
            <div class="loop-item">
                3
            </div>
            <div class="loop-item">
                4
            </div>
            <div class="loop-item">
                5
            </div>
            <div class="loop-item">
                6
            </div>
        </div>
        <button id="pre">左</button>
        <button id="next">右</button>
    </div>

CSS

*{
    margin:0;
    padding:0;
}
.wrapper{
    width: 960px;
    height: 300px;
    margin: 200px auto;
    position: relative;
    box-shadow:1px 1px 15px #3333;
    display: flex;
    align-items: center;
}
.loop-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.loop-item{
    position: absolute;
    top: 0;
    height: 100%;
    width: 200px;
    background-color: aquamarine;
    transition:1s;
    position: absolute;
}
.loop-item:nth-child(1){
    transform: translateX(-220px);
    z-index: 0;
    opacity: 0;
}
.loop-item:nth-child(2){
    transform: translateX(20px);
    z-index: 1;
    opacity: 1;
}
.loop-item:nth-child(3){
    transform: translateX(260px);
    z-index: 1;
    opacity: 1;
}
.loop-item:nth-child(4){
    transform: translateX(500px);
    z-index: 1;
    opacity: 1;
}
.loop-item:nth-child(5){
    transform: translateX(740px);
    z-index: 1;
    opacity: 1;
}
.loop-item:nth-child(6){
    transform: translateX(980px);
    z-index: 0;
    opacity: 0;
}
.wrapper button{
    position: absolute;
}
.wrapper #pre{
    left: -50px;
}
.wrapper #next{
    right: -50px;
}

js

window.onload = function(){
    let pre = document.getElementById("pre");
    let next = document.getElementById("next");
    let item = document.querySelectorAll(".loop-item");
    let arrList = new Array();
    let obj = {}
    let lock = false;
    let lockTime = 2000;
    for(let i = 0;i<item.length;i++){
        obj.transform = window.getComputedStyle(item[i]).transform,
        obj.opacity = window.getComputedStyle(item[i]).opacity,
        obj.zIndex = window.getComputedStyle(item[i]).zIndex
        arrList.push(obj)
        obj = {};
    }

    pre.addEventListener("click",()=>{
        if(lockAnimal()){
            return;
        }
        arrList.push(arrList.shift());
        main();
    })
    next.addEventListener("click",()=>{
        if(lockAnimal()){
            return;
        }
        arrList.unshift(arrList.pop());
        main();
    })
    function lockAnimal(){
        if(!lock){
            lock = true;
            setTimeout(()=>{
                lock = false;
            },lockTime)
            return false;
        }else{
            return true;
        }
    }
    function main(){
        for(let i = 0;i<arrList.length;i++){
            item[i].style.transform = arrList[i].transform,
            item[i].style.opacity = arrList[i].opacity,
            item[i].style.zIndex = arrList[i].zIndex
        }
    }
}

结尾

其实这个轮播图思路非常简单，主要的就是操作数组，考虑到window.getComputedStyle()的兼容性，也可以通过js操作class的思路来实现。