js实现轮播和滑动轮播

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>简易轮播</title>
  8. </head>
  9. <style>
  10.   .lb_page { 
  11.     margin: 200px auto;
  12.     width: 400px;
  13.     height: 250px;
  14.     position: relative;
  15.   }
  17.   .lb_img { 
  18.     width: 100%;
  19.     height: 100%;
  20.     position: relative;
  21.   }
  23.   ul { 
  24.     margin: 0px;
  25.     padding: 0px;
  26.     list-style: none;
  27.     width: 100%;
  28.     height: 100%;
  29.   }
  31.   .lb_img li { 
  32.     position: absolute;
  33.     width: 100%;
  34.     height: 100%;
  35.     opacity: 0;
  36.     transition: all 1s;
  37.   }
  39.   .active { 
  40.     opacity: 1 !important;
  41.   }
  43.   .lb_dot { 
  44.     position: absolute;
  45.     z-index: 3;
  46.     top: 90%;
  47.     left: 50%;
  48.     transform: translate(-50%, -50%);
  49.     width: 100px;
  50.     height: 20px;
  51.   }
  53.   .lb_dot>ul { 
  54.     display: flex;
  55.     justify-content: center;
  56.     align-items: center;
  57.   }
  59.   .lb_dot li { 
  60.     width: 20%;
  61.     height: 100%;
  62.     font-size: 36px;
  63.     color: white;
  64.     text-align: center;
  65.     line-height: 20px;
  66.     cursor: pointer;
  67.   }
  69.   .lb_pre { 
  70.     position: absolute;
  71.     top: 50%;
  72.     left: 0;
  73.     z-index: 4;
  74.     transform: translate(0, -50%);
  75.     background-color: black;
  76.     opacity: 0.5;
  77.     width: 30px;
  78.     height: 30px;
  79.     color: white;
  80.     display: none;
  81.     cursor: pointer;
  82.   }
  84.   .lb_next { 
  85.     position: absolute;
  86.     top: 50%;
  87.     right: 0;
  88.     z-index: 4;
  89.     transform: translate(0, -50%);
  90.     background-color: black;
  91.     opacity: 0.5;
  92.     width: 30px;
  93.     height: 30px;
  94.     color: white;
  95.     display: none;
  96.     cursor: pointer;
  97.   }
  99.   .select { 
  100.     color: aqua !important;
  101.   }
  102. </style>
  104. <body>
  105.   <!-- 整个轮播容器 -->
  106.   <div class="lb_page">
  107.     <!-- 轮播图 -->
  108.     <div class="lb_img">
  109.       <ul>
  110.         <li class="active"><img src="image/lbt1.jpg" alt="" style="width: 100%;height: 100%;"></li>
  111.         <li><img src="image/lbt2.jpg" alt="" style="width: 100%;height: 100%;"></li>
  112.         <li><img src="image/lbt3.jpg" alt="" style="width: 100%;height: 100%;"></li>
  113.         <li><img src="image/lbt4.jpg" alt="" style="width: 100%;height: 100%;"></li>
  114.         <li><img src="image/lbt5.jpg" alt="" style="width: 100%;height: 100%;"></li>
  115.       </ul>
  116.     </div>
  118.     <!-- 轮播小圆点 -->
  119.     <div class="lb_dot">
  120.       <ul>
  121.         <li class="select">·</li>
  122.         <li>·</li>
  123.         <li>·</li>
  124.         <li>·</li>
  125.         <li>·</li>
  126.       </ul>
  127.     </div>
  129.     <!-- 左右按钮 -->
  130.     <div class="lb_pre">per</div>
  131.     <div class="lb_next">next</div>
  132.   </div>
  133. </body>
  134. <script>
  135.   var lbImg = document.getElementsByClassName("lb_img")[0];
  136.   var lbPre = document.getElementsByClassName("lb_pre")[0];//上一个DOM
  137.   var lbNext = document.getElementsByClassName("lb_next")[0];//下一个DOM
  138.   var lbDots = document.getElementsByClassName("lb_dot")[0];//轮播索引点
  139.   var lbDot = lbDots.getElementsByTagName('li');//每一个索引点
  140.   var imgLi = lbImg.getElementsByTagName('li');//每一张
  141.   let index = 0;//关键变量、通过操作index进行轮播、切换等操作
  144.   // 鼠标移进让左右按钮显示(暂时有这种办法解决事件捕捉)
  145.   lbDots.onmouseover = lbNext.onmouseover = lbPre.onmouseover = lbImg.onmouseover = function () { 
  146.     clearInterval(timer) //鼠标移入暂定轮播
  147.     lbPre.style.display = 'block';
  148.     lbNext.style.display = 'block';
  149.   }
  150.   lbDots.onmouseout = lbNext.onmouseout = lbPre.onmouseout = lbImg.onmouseout = function () { 
  151.     lbPre.style.display = 'none';
  152.     lbNext.style.display = 'none';
  153.     timer = setInterval(() => {  //鼠标移出重新开始
  154.       index++
  155.       showImg()
  156.     }, 2000);
  157.   }
  159.   function showImg() { 
  160.     //初始化
  161.     for (let i = 0; i < imgLi.length; i++) { 
  162.       imgLi[i].className = '';
  163.       lbDot[i].className = ''
  164.     }
  165.     if (index > 4) { 
  166.       index = 0
  167.     }
  168.     if (index < 0) { 
  169.       index = 4
  170.     }
  171.     imgLi[index].className = 'active';
  172.     lbDot[index].className = 'select'
  173.   }
  175.   //自动轮播
  176.   var timer = setInterval(() => { 
  177.     index++
  178.     showImg();
  179.   }, 2000);
  182.   //前后点击事件
  183.   lbNext.onclick = function () { 
  184.     index++
  185.     showImg()
  186.   }
  187.   lbPre.onclick = function () { 
  188.     index--
  189.     showImg()
  190.   }
  192.   //点击圆点切换
  193.   for (let i = 0; i < lbDot.length; i++) { 
  194.     lbDot[i].onclick = function () { 
  195.       clearInterval(timer);
  196.       index = i
  197.       showImg()
  198.     }
  199.   }
  201. </script>
  203. </html>

演示图：

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

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>js滑动轮播</title>
  8. </head>
  10. <style>
  11.   .lb_page { 
  12.     margin: 200px auto;
  13.     width: 400px;
  14.     height: 250px;
  15.     position: relative;
  16.   }
  18.   .lb_img { 
  19.     width: 100%;
  20.     height: 100%;
  21.     position: relative;
  22.     overflow: hidden;
  23.   }
  25.   ul { 
  26.     position: absolute;
  27.     margin: 0px;
  28.     padding: 0px;
  29.     list-style: none;
  30.     width: 2800px;
  31.     height: 100%;
  32.   }
  34.   .lb_img li { 
  35.     float: left;
  36.     width: 400px;
  37.     height: 100%;
  38.   }
  40.   .lb_dot { 
  41.     position: absolute;
  42.     z-index: 3;
  43.     top: 90%;
  44.     left: 50%;
  45.     transform: translate(-50%, -50%);
  46.     width: 100px;
  47.     height: 20px;
  48.   }
  50.   .lb_dot>ul { 
  51.     width: 100%;
  52.     left: 0px;
  53.     display: flex;
  54.     justify-content: center;
  55.     align-items: center;
  56.   }
  58.   .lb_dot li { 
  59.     width: 20%;
  60.     height: 100%;
  61.     font-size: 36px;
  62.     color: white;
  63.     text-align: center;
  64.     line-height: 20px;
  65.     cursor: pointer;
  66.   }
  68.   .lb_pre { 
  69.     position: absolute;
  70.     top: 50%;
  71.     left: 0;
  72.     z-index: 4;
  73.     transform: translate(0, -50%);
  74.     background-color: black;
  75.     opacity: 0.5;
  76.     width: 30px;
  77.     height: 30px;
  78.     color: white;
  79.     display: none;
  80.     cursor: pointer;
  81.   }
  83.   .lb_next { 
  84.     position: absolute;
  85.     top: 50%;
  86.     right: 0;
  87.     z-index: 4;
  88.     transform: translate(0, -50%);
  89.     background-color: black;
  90.     opacity: 0.5;
  91.     width: 30px;
  92.     height: 30px;
  93.     color: white;
  94.     display: none;
  95.     cursor: pointer;
  96.   }
  98.   .select { 
  99.     color: aqua !important;
  100.   }
  101. </style>
  103. <body>
  104.   <!-- 整个轮播容器 -->
  105.   <div class="lb_page">
  106.     <!-- 轮播图 -->
  107.     <div class="lb_img">
  108.       <ul id="lbImg">
  109.         <li><img src="image/lbt1.jpg" alt="" style="width: 100%;height: 100%;"></li>
  110.         <li><img src="image/lbt2.jpg" alt="" style="width: 100%;height: 100%;"></li>
  111.         <li><img src="image/lbt3.jpg" alt="" style="width: 100%;height: 100%;"></li>
  112.         <li><img src="image/lbt4.jpg" alt="" style="width: 100%;height: 100%;"></li>
  113.         <li><img src="image/lbt5.jpg" alt="" style="width: 100%;height: 100%;"></li>
  114.       </ul>
  115.     </div>
  117.     <!-- 轮播小圆点 -->
  118.     <div class="lb_dot">
  119.       <ul>
  120.         <li class="select">·</li>
  121.         <li>·</li>
  122.         <li>·</li>
  123.         <li>·</li>
  124.         <li>·</li>
  125.       </ul>
  126.     </div>
  128.     <!-- 左右按钮 -->
  129.     <div class="lb_pre">per</div>
  130.     <div class="lb_next">next</div>
  131.   </div>
  132. </body>
  133. <script>
  134.   //得到一系列DOM
  135.   var lbImg = document.getElementById("lbImg");
  136.   var lbImgItem = lbImg.getElementsByTagName('li');
  137.   var lbDots = document.getElementsByClassName("lb_dot")[0];
  138.   var lbDot = lbDots.getElementsByTagName('li');
  139.   var lbPre = document.getElementsByClassName("lb_pre")[0];
  140.   var lbNext = document.getElementsByClassName("lb_next")[0];
  141.   //复制最后一张图片到队首、第一张图片到队尾
  142.   lbImg.appendChild(lbImgItem[0].cloneNode(true));
  143.   lbImg.prepend(lbImgItem[4].cloneNode(true))
  144.   lbImg.style.left = -400 + "px" //将第一张图片放入盒子中
  145.   let index = 0 //关键变量，指向当前图片
  147.   lbDots.onmouseover = lbNext.onmouseover = lbPre.onmouseover = lbImg.onmouseover = function () { 
  148.     clearInterval(timer) //鼠标移入暂定轮播
  149.     lbPre.style.display = 'block';
  150.     lbNext.style.display = 'block';
  151.   }
  152.   lbDots.onmouseout = lbNext.onmouseout = lbPre.onmouseout = lbImg.onmouseout = function () { 
  153.     lbPre.style.display = 'none';
  154.     lbNext.style.display = 'none';
  155.     timer = setInterval(() => {  //鼠标移出重新开始
  156.       index++
  157.       show()
  158.     }, 2000);
  159.   }
  161.   //核心函通过判断index的变化来做对应的操作
  162.   function show() { 
  163.     for (let i = 0; i < lbDot.length; i++) { 
  164.       lbDot[i].className = ''
  165.     }
  166.     //类似index = 6时
  167.     if (index < -1) { 
  168.       lbImg.style.transition = 'none';
  169.       lbImg.style.left = -2000 + 'px';
  170.       lbDot[4].className = 'select'
  171.       index = 4;
  172.       setTimeout(() => { 
  173.         index--;
  174.         show()
  175.       }, 0);
  176.       return
  177.     }
  178.     //index = 6及index指向第一张图片
  179.     else if (index > 5) { 
  180.       clearInterval(timer)
  181.       lbImg.style.transition = 'none';//停止过渡的动画
  182.       lbImg.style.left = -400 + 'px';//迅速切换到第一张图片
  183.       lbDot[0].className = 'select'
  184.       setTimeout(() => {  //开个0延迟的计时器的目的是为了直接切换到第二张（解决第二次轮播时第一张图片换到第二张图片时，延迟加倍的bug）！！重点理解
  185.         index++
  186.         show()
  187.       }, 0);
  189.       timer = setInterval(() => {  //重新开启循环计时器
  190.         index++;
  191.         show()
  192.       }, 2000);
  193.       index = 0;
  194.       return;
  195.     }
  196.     //下面都是解决轮播序号的切换认真看下不难理解
  197.     else if (index == 5) { 
  198.       lbDot[0].className = 'select'
  199.     }
  200.     else if (index == -1) { 
  201.       lbDot[4].className = 'select'
  202.     }
  203.     else { 
  204.       lbDot[index].className = 'select'
  205.     }
  207.     //关键步骤400为图片宽度 index为几个初始为-400px 因为前面复制了最后一张图片
  208.     var widthLeft = -(index + 1) * 400;
  209.     lbImg.style.left = widthLeft + "px";
  210.     lbImg.style.transition = 'left 0.5s';//图片切换的动画
  211.   }
  213.   //前后点击事件
  214.   lbNext.onclick = function () { 
  215.     clearInterval(timer)
  216.     index++
  217.     show()
  218.   }
  219.   lbPre.onclick = function () { 
  220.     clearInterval(timer)
  221.     index--
  222.     show()
  223.   }
  225.   //点击圆点切换
  226.   for (let i = 0; i < lbDot.length; i++) { 
  227.     lbDot[i].onclick = function () { 
  228.       clearInterval(timer);
  229.       index = i
  230.       show()
  231.     }
  232.   }
  235.   var timer = setInterval(() => { 
  236.     index++;
  237.     show()
  238.   }, 2000);
  240. </script>

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

发表评论

表情：
评论列表 （有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

    相关 js实现轮播和滑动轮播

    js的轮播图无论网页还是移动端都随处可见，本文用简单的方法来实现js的普通轮播图与滑动轮播图。（废话不多说，关键思路都写在代码注释处） js普通轮播 简单描述一下js普

    矫情吗；*矫情吗；*/ 0 赞/ 114 阅读

    相关 js轮播

    js轮播 轮播：指的是图片间隔n秒循环性的播放 知识点：if/else、for语句、DOM操作、事件绑定、定时器 这里简单说明一下js所做的事情的思路： 1、单

    蔚落蔚落/ 0 赞/ 520 阅读