一个旋转木马轮播图

首先是布局,比较简单.

<body>
    <div class="wrapper">
        <ul>
            <li><img src="./images/atlas.jpg" alt=""></li>
            <li><img src="./images/christmas_lights.jpg" alt=""></li>
            <li><img src="./images/coldplay.jpg" alt=""></li>
            <li><img src="./images/dont_panic.jpg" alt=""></li>
            <li><img src="./images/fix_you.jpg" alt=""></li>
            <li><img src="./images/Lost.jpg" alt=""></li>
            <li><img src="./images/prospekts.jpg" alt=""></li>
        </ul>
        <div class="btn" id="pre">pre</div>
        <div class="btn" id="next">next</div>
    </div>
    <script src="./demo.js"></script>
</body>

然后简单设置下样式,demo.css

*{
    margin:0;
    padding:0;
    list-style: none;
}
.wrapper{
    width:1100px;
    height:600px;
    margin:100px auto;
    position: relative;
}
.wrapper ul{
    position: relative;
    height:600px;
}
.wrapper li{
    position: absolute;
    width:262px;
    height:389px;
    top:50%;
    left:50%;
    margin-left:-131px;
    margin-top:-195px;
    transition: z-index 0.2s ease-in-out,transform 0.8s ease-in-out 0.3s;
    cursor: pointer;
    border:5px solid black;
}
.wrapper li img{
    width:262px;
    height:389px;
}
.btn{
    display:inline-block;
    width:80px;
    height:40px;
    border:1px solid #000;
    border-radius:8px;
    cursor:pointer;
    line-height:40px;
    text-align: center;
    font-weight:bolder;
    position: absolute;
    left:45%;
}
#pre{
    transform:translateX(-110%);
}

最后就是js啦,demo.js

var oLi=document.getElementsByTagName("li");
var pre=document.getElementById("pre");
var next=document.getElementById("next");
var btn=document.getElementsByClassName("btn");
var len=oLi.length;
var timer;
var sort=[];
var flag=true;
var width = oLi[0].getBoundingClientRect().width;
function init(){
    //将对象编程数组
    sort=Array.prototype.slice.call(oLi);
    set(sort);
    bindEvent();
    move();
}
init();
function set(arr){
    var len=arr.length;
    var center=Math.floor(len/2);

    arr[center].style.transform='scale(1.2)';
    arr[center].style.zIndex=4;
    for(var i=0;i<len;i++){
        var abs=Math.abs(i-center);
        if(i!=center){
            arr[i].style.transform='translateX('+(i-center)*width/2+'px)';
            arr[i].style.zIndex=-abs;
        }
        flag=true;
    }
}
function bindEvent(){
    if(flag){
        pre.addEventListener('click',function(){
            flag=false;
            sort.unshift(sort.pop());
            set(sort);
        });
        next.addEventListener('click',function(){
            flag=false;
            sort.push(sort.shift());
            set(sort);
        });
    }
   
    
    for(var i=0;i<btn.length;i++){
        btn[i].addEventListener('mouseenter',function(){
            clearInterval(timer);
        });
        btn[i].addEventListener('mouseout',function(){
            move();
        });
    }
}
function move(){
    clearInterval(timer);
    timer=setInterval(function(){
        sort.push(sort.shift());
        set(sort);
    },2000);
}

最后实现的效果图,每隔两秒自动轮播:

一个旋转木马轮播图

猜你喜欢