原生js层叠轮播图

向右看齐 2022-11-08 14:15 187阅读 0赞

**前言:**  
已经一个月没有怎么更博了，一直在学习一些其他得。之前在网上看到一个层叠样式得轮播图，也是看过一个博主得内容以后自己又理清楚了思路才写出来。

**原文出处：https://www.cnblogs.com/iFangHuanrui/p/10584223.html**

**正文:**  
**对于这类轮播图首先我们要先设置好每个需要轮播元素得位置，使得看上去相对得立体一点，那么下面我们来想一下，假设有5张图片需要轮播，图片得顺序从左到右一次排列，那么我们是不是需要将第一张和第五张对应起来，放在两边，第二张和第四章放在两边对应起来。第三张也就是当前展示得轮播图放到中间就可以了。效果如下:**

**下面我们来看下代码:**

**HTML:**

**CSS:**

div{ 
                width: 1200px;
                height: 800px;
                margin:150px auto;
                background:pink;
            }
            ul{ 
                position:relative;
                width: 100%;
                height: 100%;
                transform:rotateX(-20deg);
            }
            li{ 
                position:absolute;
                list-style:none;
                height: 350px;
                font-size:64px;
                transition: all .3s;
               
            }
            .show1{ 
                width:400px;
                top: 20px;
                left:0px;
                opacity:0.2;
                z-index:1;
                background:yellow;
            }
            .show5{ 
                width: 400px;
                left:750px;
                top: 20px;
                opacity:0.2;
                z-index:1;
                background:aqua; 
            }
            .show2{ 
                width: 600px;
                left:0px;
                top:70px;
                opacity:.7;
                z-index:2;
                background:orange;
            }
            .show4{ 
                width: 600px;
                left:600px;
                top:70px;
                opacity:.7;
                z-index:2;
                background:gold; 
            }
            .show3{ 
                width: 800px;
                left:180px;
                top:100px;
                z-index:3;
                opacity:1;
                background: hotpink;
            }
            .cut1{ 
                position:absolute;
                z-index:99;
                font-size: 30px;
                left:0;
                top:0;
                width: 50px;
                height: 70px;
                text-align:center;
                line-height:70px;
                background:gray;
            }
            .cut2{ 
                position:absolute;
                z-index:99;
                font-size: 30px;
                right:39px;
                top:0;
                width: 50px;
                height: 70px;
                text-align:center;
                line-height:70px;
                background:gray;
            }

**这些基本要求实现后，我们来看下核心部分怎么实现，大家想一下，假设我们得5张图片 1 2 3 4 5按顺序从左到右排放整齐，轮播图得整体效果是向右走的，目前显示得是第一张，那么接下来是不是需要显示第二张，那么如何显示第二张呢，是不是需要把第一张图片放到尾部，这样第二张图片就显示出来了。**

**那么现在得图片得顺序是不是 2 3 4 5 1，这时候我们想要轮播图向左移动一张，是不是说想要显示第一张图片，那么这个时候我们是不是只需要把最后一个元素1，移动到头部就行了呢，这样顺序就变成了1 2 3 4 5**

**有了以上得思路我们先实现一下自动轮播得效果:**

**JS：**

// 获取变量名称
       var ul = document.querySelector('ul');
       var li = document.querySelectorAll("li");
       var name1 = ["show1","show2","show3","show4","show5"];//name-style
       var cut1 = document.querySelector('.cut1'); //cut1
       var cut2 = document.querySelector('.cut2'); //cut2
     timer = setInterval(function(){ 
         // 把开头的元素放到最后
         console.log("11");
         var first = name1.shift(); //获取第一个元素
         name1.push(first);//追加到数组尾部
         for(var i=0;i<li.length;i++){ 
             li[i].className = name1[i];
         }
     },3000);

**这里就是按照上面得思路写出来得自动轮播效果。注意这里把我们上面调整得每个元素得样式复制到数组中，然后給修改每个轮播得元素得样式，也就是把name1数组得样式赋值給轮播得元素**

**那么大家在想一下左右切换，左切换就是说把最后一个元素移动到头部，而右切换呢，就是把第一个元素移动到尾部**  
**代码：**

// 左点击切换
     cut1.onclick = function(){ 
          clearInterval(timer); //鼠标点击切换时轮播中断
          // 把数组中最后一个元素提到前面
          var last = name1.pop();  //删除并返回最后一个元素
          name1.unshift(last); //添加到数组头部
          for(var i=0;i<li.length;i++){ 
              li[i].className = name1[i];
          	}
       }
     // 右点击切换
     cut2.onclick = function(){ 
         clearInterval(timer); //鼠标点击切换时轮播中断
         console.log("轮播停止");
         var first = name1.shift(); //获取第一个元素
         name1.push(first);//追加到数组尾部
         for(var i=0;i<li.length;i++){ 
             li[i].className = name1[i];
         }
     }

**那么我们点击切换后，由于清除了该定时器，就会导致点击后自动轮播效果中断，所以我们需要在按钮得鼠标离开事件中再重新启动轮播图，这样就可以实现鼠标点击后继续轮播了**

// 鼠标离开是继续轮播
            cut2.onmouseout = function(){ 
                console.log("鼠标离开");
               timer =  setInterval(function(){ 
                    console.log("轮播继续");
                // 把开头的元素放到最后
                console.log("11");
                var first = name1.shift(); //获取第一个元素
                name1.push(first);//追加到数组尾部
                for(var i=0;i<li.length;i++){ 
                    li[i].className = name1[i];
                }
              },3000);
            }
             // 鼠标离开是继续轮播
             cut1.onmouseout = function(){ 
                console.log("鼠标离开");
               timer =  setInterval(function(){ 
                    console.log("轮播继续");
                // 把开头的元素放到最后
                console.log("11");
                var first = name1.shift(); //获取第一个元素
                name1.push(first);//追加到数组尾部
                for(var i=0;i<li.length;i++){ 
                    li[i].className = name1[i];
                }
              },3000);
            }

好了，答主本期得分享就到这里。欢迎大家指正与评论！！