js实现轮播和滑动轮播

矫情吗；* 2023-02-18 08:27 56阅读 0赞

js的轮播图无论网页还是移动端都随处可见，本文用简单的方法来实现js的普通轮播图与滑动轮播图。（废话不多说，关键思路都写在代码注释处）  
**js普通轮播**  
简单描述一下js普通轮播的思路，用一个ul来存储需要轮播的图片，li使用绝对定位来保证图像成层叠关系。此时只需要改变图像的层叠关系就行，在这里程序的关键就是index变量，可以通过改变index来做到控制相应的图片的z-index。（具体思路步骤请参考代码的注释）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>简易轮播</title>
    </head>
    <style>
      .lb_page { 
        margin: 200px auto;
        width: 400px;
        height: 250px;
        position: relative;
      }
    
      .lb_img { 
        width: 100%;
        height: 100%;
        position: relative;
      }
    
      ul { 
        margin: 0px;
        padding: 0px;
        list-style: none;
        width: 100%;
        height: 100%;
      }
    
      .lb_img li { 
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 1s;
      }
    
      .active { 
        opacity: 1 !important;
      }
    
      .lb_dot { 
        position: absolute;
        z-index: 3;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 20px;
      }
    
      .lb_dot>ul { 
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .lb_dot li { 
        width: 20%;
        height: 100%;
        font-size: 36px;
        color: white;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
      }
    
      .lb_pre { 
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 4;
        transform: translate(0, -50%);
        background-color: black;
        opacity: 0.5;
        width: 30px;
        height: 30px;
        color: white;
        display: none;
        cursor: pointer;
      }
    
      .lb_next { 
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 4;
        transform: translate(0, -50%);
        background-color: black;
        opacity: 0.5;
        width: 30px;
        height: 30px;
        color: white;
        display: none;
        cursor: pointer;
      }
    
      .select { 
        color: aqua !important;
      }
    </style>
    
    <body>
      
      <div class="lb_page">
        
        <div class="lb_img">
          <ul>
            <li class="active"><img src="image/lbt1.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt2.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt3.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt4.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt5.jpg" alt="" style="width: 100%;height: 100%;"></li>
          </ul>
        </div>
    
        
        <div class="lb_dot">
          <ul>
            <li class="select">·</li>
            <li>·</li>
            <li>·</li>
            <li>·</li>
            <li>·</li>
          </ul>
        </div>
    
        
        <div class="lb_pre">per</div>
        <div class="lb_next">next</div>
      </div>
    </body>
    <script>
      var lbImg = document.getElementsByClassName("lb_img")[0];
      var lbPre = document.getElementsByClassName("lb_pre")[0];//上一个DOM
      var lbNext = document.getElementsByClassName("lb_next")[0];//下一个DOM
      var lbDots = document.getElementsByClassName("lb_dot")[0];//轮播索引点
      var lbDot = lbDots.getElementsByTagName('li');//每一个索引点
      var imgLi = lbImg.getElementsByTagName('li');//每一张
      let index = 0;//关键变量、通过操作index进行轮播、切换等操作
    
    
      // 鼠标移进让左右按钮显示(暂时有这种办法解决事件捕捉)
      lbDots.onmouseover = lbNext.onmouseover = lbPre.onmouseover = lbImg.onmouseover = function () { 
        clearInterval(timer) //鼠标移入暂定轮播
        lbPre.style.display = 'block';
        lbNext.style.display = 'block';
      }
      lbDots.onmouseout = lbNext.onmouseout = lbPre.onmouseout = lbImg.onmouseout = function () { 
        lbPre.style.display = 'none';
        lbNext.style.display = 'none';
        timer = setInterval(() => {  //鼠标移出重新开始
          index++
          showImg()
        }, 2000);
      }
    
      function showImg() { 
        //初始化
        for (let i = 0; i < imgLi.length; i++) { 
          imgLi[i].className = '';
          lbDot[i].className = ''
        }
        if (index > 4) { 
          index = 0
        }
        if (index < 0) { 
          index = 4
        }
        imgLi[index].className = 'active';
        lbDot[index].className = 'select'
      }
    
      //自动轮播
      var timer = setInterval(() => { 
        index++
        showImg();
      }, 2000);
    
    
      //前后点击事件
      lbNext.onclick = function () { 
        index++
        showImg()
      }
      lbPre.onclick = function () { 
        index--
        showImg()
      }
    
      //点击圆点切换
      for (let i = 0; i < lbDot.length; i++) { 
        lbDot[i].onclick = function () { 
          clearInterval(timer);
          index = i
          showImg()
        }
      }
    
    </script>
    
    </html>

演示图：

![在这里插入图片描述][20200617204450935.gif_pic_center]  
**js滑动轮播**  
js的滑动轮播相对于普通轮播来说相对麻烦点，思路也不太一样，在这我简述一下滑动轮播的实现思路。首先滑动轮播的实现主要原理和js走马灯类似，通过改变left 来做到切换。首先在定位上，ul使用绝对定位以改变其left做到轮播，大概了解的伙伴知道，要想让图片转换的非常丝滑~就必须在原本图片的前后在复制最后一张图片和第一张的图片（不知道也没关系，一张图让你搞懂）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>js滑动轮播</title>
    </head>
    
    <style>
      .lb_page { 
        margin: 200px auto;
        width: 400px;
        height: 250px;
        position: relative;
      }
    
      .lb_img { 
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }
    
      ul { 
        position: absolute;
        margin: 0px;
        padding: 0px;
        list-style: none;
        width: 2800px;
        height: 100%;
      }
    
      .lb_img li { 
        float: left;
        width: 400px;
        height: 100%;
      }
    
      .lb_dot { 
        position: absolute;
        z-index: 3;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 20px;
      }
    
      .lb_dot>ul { 
        width: 100%;
        left: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .lb_dot li { 
        width: 20%;
        height: 100%;
        font-size: 36px;
        color: white;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
      }
    
      .lb_pre { 
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 4;
        transform: translate(0, -50%);
        background-color: black;
        opacity: 0.5;
        width: 30px;
        height: 30px;
        color: white;
        display: none;
        cursor: pointer;
      }
    
      .lb_next { 
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 4;
        transform: translate(0, -50%);
        background-color: black;
        opacity: 0.5;
        width: 30px;
        height: 30px;
        color: white;
        display: none;
        cursor: pointer;
      }
    
      .select { 
        color: aqua !important;
      }
    </style>
    
    <body>
      
      <div class="lb_page">
        
        <div class="lb_img">
          <ul id="lbImg">
            <li><img src="image/lbt1.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt2.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt3.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt4.jpg" alt="" style="width: 100%;height: 100%;"></li>
            <li><img src="image/lbt5.jpg" alt="" style="width: 100%;height: 100%;"></li>
          </ul>
        </div>
    
        
        <div class="lb_dot">
          <ul>
            <li class="select">·</li>
            <li>·</li>
            <li>·</li>
            <li>·</li>
            <li>·</li>
          </ul>
        </div>
    
        
        <div class="lb_pre">per</div>
        <div class="lb_next">next</div>
      </div>
    </body>
    <script>
      //得到一系列DOM
      var lbImg = document.getElementById("lbImg");
      var lbImgItem = lbImg.getElementsByTagName('li');
      var lbDots = document.getElementsByClassName("lb_dot")[0];
      var lbDot = lbDots.getElementsByTagName('li');
      var lbPre = document.getElementsByClassName("lb_pre")[0];
      var lbNext = document.getElementsByClassName("lb_next")[0];
      //复制最后一张图片到队首、第一张图片到队尾
      lbImg.appendChild(lbImgItem[0].cloneNode(true));
      lbImg.prepend(lbImgItem[4].cloneNode(true))
      lbImg.style.left = -400 + "px" //将第一张图片放入盒子中
      let index = 0 //关键变量，指向当前图片
    
      lbDots.onmouseover = lbNext.onmouseover = lbPre.onmouseover = lbImg.onmouseover = function () { 
        clearInterval(timer) //鼠标移入暂定轮播
        lbPre.style.display = 'block';
        lbNext.style.display = 'block';
      }
      lbDots.onmouseout = lbNext.onmouseout = lbPre.onmouseout = lbImg.onmouseout = function () { 
        lbPre.style.display = 'none';
        lbNext.style.display = 'none';
        timer = setInterval(() => {  //鼠标移出重新开始
          index++
          show()
        }, 2000);
      }
    
      //核心函通过判断index的变化来做对应的操作
      function show() { 
        for (let i = 0; i < lbDot.length; i++) { 
          lbDot[i].className = ''
        }
        //类似index = 6时
        if (index < -1) { 
          lbImg.style.transition = 'none';
          lbImg.style.left = -2000 + 'px';
          lbDot[4].className = 'select'
          index = 4;
          setTimeout(() => { 
            index--;
            show()
          }, 0);
          return
        }
        //index = 6及index指向第一张图片
        else if (index > 5) { 
          clearInterval(timer)
          lbImg.style.transition = 'none';//停止过渡的动画
          lbImg.style.left = -400 + 'px';//迅速切换到第一张图片
          lbDot[0].className = 'select'
          setTimeout(() => {  //开个0延迟的计时器的目的是为了直接切换到第二张（解决第二次轮播时第一张图片换到第二张图片时，延迟加倍的bug）！！重点理解
            index++
            show()
          }, 0);
    
          timer = setInterval(() => {  //重新开启循环计时器
            index++;
            show()
          }, 2000);
          index = 0;
          return;
        }
        //下面都是解决轮播序号的切换认真看下不难理解
        else if (index == 5) { 
          lbDot[0].className = 'select'
        }
        else if (index == -1) { 
          lbDot[4].className = 'select'
        }
        else { 
          lbDot[index].className = 'select'
        }
    
        //关键步骤400为图片宽度 index为几个初始为-400px 因为前面复制了最后一张图片
        var widthLeft = -(index + 1) * 400;
        lbImg.style.left = widthLeft + "px";
        lbImg.style.transition = 'left 0.5s';//图片切换的动画
      }
    
      //前后点击事件
      lbNext.onclick = function () { 
        clearInterval(timer)
        index++
        show()
      }
      lbPre.onclick = function () { 
        clearInterval(timer)
        index--
        show()
      }
    
      //点击圆点切换
      for (let i = 0; i < lbDot.length; i++) { 
        lbDot[i].onclick = function () { 
          clearInterval(timer);
          index = i
          show()
        }
      }
    
    
      var timer = setInterval(() => { 
        index++;
        show()
      }, 2000);
    
    </script>

演示图：  
![在这里插入图片描述][20200617204528278.gif_pic_center]  
两种轮播图暂时没有发现什么bug，如果你有什么问题或者建议欢迎留言。

[20200617204450935.gif_pic_center]: https://img-blog.csdnimg.cn/20200617204450935.gif#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200617212148483.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ==,size_16,color_FFFFFF,t_70#pic_center
[20200617204528278.gif_pic_center]: https://img-blog.csdnimg.cn/20200617204528278.gif#pic_center