Js或jQuery图片层叠轮播------Sestid

Bertha 。 2024-04-18 09:10 74阅读 0赞

**目录**

原生Js3张图片层叠轮播：

html：

CSS:

JavaScript：

jQuery6张图片层叠轮播：

html：

css：

javaScript：

详细解析：

--------------------

# 原生Js3张图片层叠轮播： #

## html： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>wtf</title>
    </head>
    <body>
     <div class="container">
         <div class="box">
             <img class="front" src="img/A.jpg" alt="PIC">
             <img class="back" src="img/B.jpg" alt="PIC">
             <img class="active" src="img/C.jpg" alt="PIC">
             <div class="btns">
                 <span class="btn"><</span>
                 <span class="btn">></span>
             </div>
         </div>
     </div>
     
    </body>
    </html>

## CSS: ##

## JavaScript： ##

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

# jQuery6张图片层叠轮播： #

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2ODAyMi8yMDE4MDcvMTM2ODAyMi0yMDE4MDcyMDEwMDAyOTcwNy04OTcyNjY1NzAuZ2lm][]

## 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： ##

## 详细解析： ##

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

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

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

用pop()取出数组最后一个元素，再用unshift()把它放到数组前面，shift()取出数组开头元素，再用push()把它放到数组后面，就搞定了（其他代码先不做解释）

下面要做的就是定时器了，不用操作也能使图片自行滚动起来：

首先设置一个定时器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'，也就是正中心的位置

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

[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2ODAyMi8yMDE4MDcvMTM2ODAyMi0yMDE4MDcyMDEwMDAyOTcwNy04OTcyNjY1NzAuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTM2ODAyMi8yMDE4MDcvMTM2ODAyMi0yMDE4MDcyMDEwMDAyOTcwNy04OTcyNjY1NzAuZ2lm