0
0

JS实现轮播图（一看就懂逻辑清晰）

轮播图有很多种实现方法，这是其中一种最清晰的方法。思路很清晰，代码很简单，欢迎大佬多指教。

先来看下效果图，嫌麻烦就不用具体图片来实现了，主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

HTML

首先是html内容，布局很简单，一个图片列表，一个点列表，两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据（下面JS代码会提到）。记得给默认显示的图片和对应的小圆点加上active类哦。

  1.  <div class="wrap">
  2.         <ul class="list">
  3.             <li class="item active">0</li>
  4.             <li class="item">1</li>
  5.             <li class="item">2</li>
  6.             <li class="item">3</li>
  7.             <li class="item">4</li>
  8.         </ul>
  9.         <ul class="pointList">
  10.             <li class="point active" data-index = 0></li>
  11.             <li class="point" data-index = 1></li>
  12.             <li class="point" data-index = 2></li>
  13.             <li class="point" data-index = 3></li>
  14.             <li class="point" data-index = 4></li>
  15.         </ul>
  16.         <button class="btn" id="leftBtn"> < </button> 
  17.         <button class="btn" id="rightBtn"> > </button>
  19.     </div>

CSS

思路：父容器list相对定位，item绝对定位，实现让所有图片重叠在父容器内。利用z-index来设置图片高度，图片高度最高会显示在顶层上。那么整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。active是一个样式，给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果，opacity完全不透明到透明，再加个transition动画效果。最后就是cursor给小圆点添加“小手指”，其他就没什么好说的了。

  1. <style>
  2.         .wrap {
  3.             width: 800px;
  4.             height: 400px;
  5.             position: relative;
  6.         }
  8.         .list {
  9.             width: 800px;
  10.             height: 400px;
  11.             position: relative;
  12.             padding-left: 0px;
  13.         }
  15.         .item {
  16.             width: 100%;
  17.             height: 100%;
  18.             list-style: none;
  19.             position: absolute;
  20.             left: 0;
  21.             opacity: 0;
  22.             transition: all .8s;
  23.         }
  25.         .item:nth-child(1) {
  26.             background-color: skyblue;
  27.         }
  29.         .item:nth-child(2) {
  30.             background-color: yellowgreen;
  31.         }
  33.         .item:nth-child(3) {
  34.             background-color: rebeccapurple;
  35.         }
  37.         .item:nth-child(4) {
  38.             background-color: pink;
  39.         }
  41.         .item:nth-child(5) {
  42.             background-color: orange;
  43.         }
  45.         .item.active {
  46.             z-index: 10;
  47.             opacity: 1;
  48.         }
  50.         .btn {
  51.             width: 60px;
  52.             height: 100px;
  53.             z-index: 100;
  54.             top: 150px;
  55.             position: absolute;
  56.         }
  58.         #leftBtn {
  59.             left: 0px;
  60.         }
  62.         #rightBtn {
  63.             right: 0px;
  64.         }
  66.         .pointList {
  67.             list-style: none;
  68.             padding-left: 0px;
  69.             position: absolute;
  70.             right: 20px;
  71.             bottom: 20px;
  72.             z-index: 200;
  73.         }
  75.         .point {
  76.             width: 10px;
  77.             height: 10px;
  78.             background-color: antiquewhite;
  79.             border-radius: 100%;
  80.             float: left;
  81.             margin-right: 8px;
  82.             border-style: solid;
  83.             border-width: 2px;
  84.             border-color: slategray;
  85.             cursor: pointer;  
  86.         }
  88.         .point.active{
  89.             background-color: cadetblue;
  90.         }
  91.     </style>

Javascript

Index可以说是整个代码里面的"核心"，先封装一个清除active的方法，这里面要清除图片的active（显示在最上层），比如切换到下一张图上张图的active就要清除。还有point的active（图片对应小圆点改变样式）。然后goIndex这个方法就是给图片和对应的小圆点同时加上active，左右按钮绑定的方法就不说了。

用getAttribute拿到刚才给li标签绑定的data-index属性，绑定图片index = pointindex，就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了，就可以实现图片切换小圆点跟随变化的效果。

  1. <script>
  2.         var items = document.querySelectorAll(".item");//图片节点
  3.         var points = document.querySelectorAll(".point")//点
  4.         var left = document.getElementById("leftBtn");
  5.         var right = document.getElementById("rightBtn");
  6.         var all = document.querySelector(".wrap")
  7.         var index = 0;
  8.         var time = 0;//定时器跳转参数初始化
  9.         
  11.         //封装一个清除active方法
  12.         var clearActive = function () {
  13.             for (i = 0; i < items.length; i++) {
  14.                 items[i].className = 'item';
  15.             }
  16.             for (j = 0; j < points.length; j++) {
  17.                 points[j].className = 'point';
  18.             }
  19.         }
  21.         //改变active方法
  22.         var goIndex = function () {
  23.             clearActive();
  24.             items[index].className = 'item active';
  25.             points[index].className = 'point active'
  26.         }
  27.         //左按钮事件
  28.         var goLeft = function () {
  29.             if (index == 0) {
  30.                 index = 4;
  31.             } else {
  32.                 index--;
  33.             }
  34.             goIndex();
  35.         }
  37.         //右按钮事件
  38.         var goRight = function () {
  39.             if (index < 4) {
  40.                 index++;
  41.             } else {
  42.                 index = 0;
  43.             }
  44.             goIndex();
  45.         }
  46.         
  48.         //绑定点击事件监听
  49.         left.addEventListener('click', function () {
  50.             goLeft();
  51.             time = 0;//计时器跳转清零
  52.         })
  54.         right.addEventListener('click', function () {
  55.             goRight();
  56.             time = 0;//计时器跳转清零
  57.         })
  59.         for(i = 0;i < points.length;i++){
  60.             points[i].addEventListener('click',function(){
  61.                 var pointIndex = this.getAttribute('data-index')
  62.                 index = pointIndex;
  63.                 goIndex();
  64.                 time = 0;//计时器跳转清零
  65.             })
  66.         }
  67.         //计时器轮播效果
  68.         var timer;
  69.         function play(){
  70.          timer = setInterval(() => {
  71.             time ++;
  72.             if(time == 20 ){
  73.                 goRight();
  74.                 time = 0;
  75.             }    
  76.         },100)
  77.     }
  78.         play();
  79.         //移入清除计时器
  80.         all.onmousemove = function(){
  81.             clearInterval(timer)
  82.         }
  83.        //移出启动计时器
  84.         all.onmouseleave = function(){
  85.             play();
  86.         }
  87.     </script>

总结：这个简单的轮播图实现例子是第一次写最容易理解，逻辑最清晰的一种。下面我把完整的代码块放出来，直接复制粘贴就可以运行。

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <style>
  6.         .wrap {
  7.             width: 800px;
  8.             height: 400px;
  9.             position: relative;
  10.         }
  12.         .list {
  13.             width: 800px;
  14.             height: 400px;
  15.             position: relative;
  16.             padding-left: 0px;
  17.         }
  19.         .item {
  20.             width: 100%;
  21.             height: 100%;
  22.             list-style: none;
  23.             position: absolute;
  24.             left: 0;
  25.             opacity: 0;
  26.             transition: all .8s;
  27.         }
  29.         .item:nth-child(1) {
  30.             background-color: skyblue;
  31.         }
  33.         .item:nth-child(2) {
  34.             background-color: yellowgreen;
  35.         }
  37.         .item:nth-child(3) {
  38.             background-color: rebeccapurple;
  39.         }
  41.         .item:nth-child(4) {
  42.             background-color: pink;
  43.         }
  45.         .item:nth-child(5) {
  46.             background-color: orange;
  47.         }
  49.         .item.active {
  50.             z-index: 10;
  51.             opacity: 1;
  52.         }
  54.         .btn {
  55.             width: 60px;
  56.             height: 100px;
  57.             z-index: 100;
  58.             top: 150px;
  59.             position: absolute;
  60.         }
  62.         #leftBtn {
  63.             left: 0px;
  64.         }
  66.         #rightBtn {
  67.             right: 0px;
  68.         }
  70.         .pointList {
  71.             list-style: none;
  72.             padding-left: 0px;
  73.             position: absolute;
  74.             right: 20px;
  75.             bottom: 20px;
  76.             z-index: 200;
  77.         }
  79.         .point {
  80.             width: 10px;
  81.             height: 10px;
  82.             background-color: antiquewhite;
  83.             border-radius: 100%;
  84.             float: left;
  85.             margin-right: 8px;
  86.             border-style: solid;
  87.             border-width: 2px;
  88.             border-color: slategray;
  89.             cursor: pointer;  
  90.         }
  92.         .point.active{
  93.             background-color: cadetblue;
  94.         }
  95.     </style>
  96. </head>
  98. <body>
  99.     <div class="wrap">
  100.         <ul class="list">
  101.             <li class="item active">0</li>
  102.             <li class="item">1</li>
  103.             <li class="item">2</li>
  104.             <li class="item">3</li>
  105.             <li class="item">4</li>
  106.         </ul>
  107.         <ul class="pointList">
  108.             <li class="point active" data-index = 0></li>
  109.             <li class="point" data-index = 1></li>
  110.             <li class="point" data-index = 2></li>
  111.             <li class="point" data-index = 3></li>
  112.             <li class="point" data-index = 4></li>
  113.         </ul>
  114.         <button class="btn" id="leftBtn"> < </button> 
  115.         <button class="btn" id="rightBtn"> > </button>
  117.     </div>
  118.     <script>
  119.         var items = document.querySelectorAll(".item");//图片
  120.         var points = document.querySelectorAll(".point")//点
  121.         var left = document.getElementById("leftBtn");
  122.         var right = document.getElementById("rightBtn");
  123.         var all = document.querySelector(".wrap")
  124.         var index = 0;
  125.         var time = 0;//定时器跳转参数初始化
  126.         
  128.         //清除active方法
  129.         var clearActive = function () {
  130.             for (i = 0; i < items.length; i++) {
  131.                 items[i].className = 'item';
  132.             }
  133.             for (j = 0; j < points.length; j++) {
  134.                 points[j].className = 'point';
  135.             }
  136.         }
  138.         //改变active方法
  139.         var goIndex = function () {
  140.             clearActive();
  141.             items[index].className = 'item active';
  142.             points[index].className = 'point active'
  143.         }
  144.         //左按钮事件
  145.         var goLeft = function () {
  146.             if (index == 0) {
  147.                 index = 4;
  148.             } else {
  149.                 index--;
  150.             }
  151.             goIndex();
  152.         }
  154.         //右按钮事件
  155.         var goRight = function () {
  156.             if (index < 4) {
  157.                 index++;
  158.             } else {
  159.                 index = 0;
  160.             }
  161.             goIndex();
  162.         }
  163.         
  165.         //绑定点击事件监听
  166.         left.addEventListener('click', function () {
  167.             goLeft();
  168.             time = 0;//计时器跳转清零
  169.         })
  171.         right.addEventListener('click', function () {
  172.             goRight();
  173.             time = 0;//计时器跳转清零
  174.         })
  176.         for(i = 0;i < points.length;i++){
  177.             points[i].addEventListener('click',function(){
  178.                 var pointIndex = this.getAttribute('data-index')
  179.                 index = pointIndex;
  180.                 goIndex();
  181.                 time = 0;//计时器跳转清零
  182.             })
  183.         }
  184.         //计时器
  185.         var timer;
  186.         function play(){
  187.          timer = setInterval(() => {
  188.             time ++;
  189.             if(time == 20 ){
  190.                 goRight();
  191.                 time = 0;
  192.             }    
  193.         },100)
  194.     }
  195.         play();
  196.         //移入清除计时器
  197.         all.onmousemove = function(){
  198.             clearInterval(timer)
  199.         }
  200.        //移出启动计时器
  201.         all.onmouseleave = function(){
  202.             play();
  203.         }
  204.     </script>
  205. </body>
  207. </html>

创作不易，觉得有帮助的话请留下一个赞谢谢~

标签： javascript 前端 css3
本文转载自: https://blog.csdn.net/qq_20495901/article/details/122936580
版权归原作者 Beannnnnnn 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JS实现轮播图（一看就懂逻辑清晰）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。