原生js层叠轮播图-蒲公英云

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

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

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

下面我们来看下代码:

HTML:

<div>
        <ul>
            <li class="show1">1</li>
            <li class="show2">2</li>
            <li class="show3">3</li>
            <li class="show4">4</li>
            <li class="show5">5</li>
            <!-- 切换按钮 -->
            <div class="cut1">左</div>
            <div class="cut2">右</div>
        </ul>
    </div>

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