原生Js3张图片层叠轮播：

html：

CSS:

JavaScript：

这个原生js的就不详细解释了，下边用jQuery的有详细解释，其实不用解释正常有点实力的前端开发人员都能看懂

jQuery6张图片层叠轮播：

html：

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;        }

javaScript：

let classes = ['left','center','right','after1','after2','after3'];let timer=setInterval(function(){    before();},5000);function before(){    for(let i=0;i
   
    li:eq('+i+')').attr("class",classes[i]);    }    for(let i=0;i
    
     li:eq('+i+')').attr("class")=='center'){            $('.btn:eq('+i+')').css("background","red");        }    }}function after(){    for(let i=0;i
     
      li:eq('+i+')').attr("class",classes[i]);    }    for(let i=0;i
      
       li:eq('+i+')').attr("class")=='center'){            $('.btn:eq('+i+')').css("background","red");        }    }}for(let i=0;i
       
        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);});

详细解析：

置了两个按钮，一个.last，另一个.next，当我们按下它们图片就会左右滚动，实现它们很简单：

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

先将轮播图中所有对象的类名都放在一个数组中，我放了六张图，所以有六个类名，现在试想一下，假如我点击next，那么第二张图就会跑到第一张图的位置上，同样第一张图会跑到最后一张图的位置上去，点击last刚好相反，最后一张图会跑到第一张图的位置上。

function before(){    for(let i=0;i
   
    li:eq('+i+')').attr("class",classes[i]);    }    for(let i=0;i
    
     li:eq('+i+')').attr("class")=='center'){            $('.btn:eq('+i+')').css("background","red");        }    }}function after(){    for(let i=0;i
     
      li:eq('+i+')').attr("class",classes[i]);    }    for(let i=0;i
      
       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
   
    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'，也就是正中心的位置

这样我们就完成了层叠轮播图的所有基本功能，除了样式长得不太像网易云的之外，网易云轮播图该有的我们都有了。

转载地址：http://hwwci.baihongyu.com/

你可能感兴趣的文章