js实现轮播图

2022/9/8 23:56:16

编程Tag： js var img 实现轮播 index 小圆点 slide arr

本文主要是介绍js实现轮播图，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  1  <style>
  2         * {
  3             padding: 0;
  4             margin: 0;
  5         }
  6         /* 1.轮播图容器  */
  7         .slide {
  8             width: 600px;
  9             height: 400px;
 10             margin: 100px auto;
 11             position: relative;
 12         }
 13 
 14         /* 1.1图片 */
 15         .slide img {
 16             width: 100%;
 17             height: 100%;
 18         }
 19         /* 1.2上一张按钮 */
 20         .slide .prev,
 21         .slide .next {
 22             position: absolute;
 23             width: 50px;
 24             height: 50px;
 25             line-height: 50px;
 26             background-color: #666;
 27             top: 50%;
 28             text-align: center;
 29             border-radius: 50%;
 30             color: #fff;
 31             font-size: 26px;
 32             transform: translateY(-50%);
 33         }
 34         .slide .prev {
 35             left: 10px;
 36         }
 37 
 38         /* 1.3下一张按钮 */
 39         .slide .next {
 40             right: 10px;
 41         }
 42 
 43         /* span小圆点 */
 44         .circles {
 45             position: absolute;
 46             bottom: 10px;
 47             width: 160px;
 48             height: 16px;
 49             left: 50%;
 50             z-index: 10;
 51             transform: translateX(-50%);
 52         }
 53 
 54         .circles span {
 55             display: inline-block;
 56             width: 16px;
 57             height: 16px;
 58             margin: 0 10px;
 59             background-color: #fff;
 60             border-radius: 50%;
 61         }
 62 
 63         .circles .active {
 64             background-color: aqua;
 65         }
 66     </style>
 67 </head>
 68 
 69 <body>
 70     <!-- 轮播图容器 -->
 71     <div class="slide">
 72         <!--1.1 图片 -->
 73         <img src="./img/02.webp" alt="">
 74         <!-- 1.2上一张按钮 -->
 75         <div class="prev">
 76             < </div>
 77                 <!-- 1.3下一张按钮 -->
 78                 <div class="next">></div>
 79                 <!--1.4小圆点  -->
 80                 <div class="circles">
 81                     <!-- 用map方法动态渲染小圆圈 -->
 82                     <!-- <span class="active"></span>
 83                     <span></span>
 84                     <span></span>
 85                     <span></span> -->
 86                 </div>
 87 
 88         </div>
 89 
 90         <script>
 91             // 定义数组，保存所有图片路径
 92             var arr = ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp']
 93             // 获取图片的dom元素
 94             var img = document.querySelector('img');
 95 
 96             var slide = document.querySelector('.slide');
 97 
 98             // 默认从0开始
 99             var index = 0;
100             // 定义变量保存定时器标识
101             var timeId;
102 
103             // 获取小圆点大容器
104             var circles = document.querySelector('.circles')
105             // 获取上一张按钮
106             var prev = document.querySelector('.prev')
107 
108             // 获取下一张按钮
109             var next = document.querySelector('.next')
110 
111 
112             // 开启定时器 更换图片集
113             // 开启自动轮播 调用下面封装的方法
114             autoPlay()
115             //   渲染小圆点 
116             render()
117             // 给slide添加鼠标移入和移出时间
118             slide.addEventListener('mouseover', function () {
119                 // 鼠标移入清除定时器
120                 clearInterval(timeId)
121             })
122             slide.addEventListener('mouseout', function () {
123                 // 鼠标离开自动开启定时器：就是把上面的代码复制一份
124                 // 开启自动轮播 调用下面封装的方法
125                 autoPlay()
126                
127 
128             })
129             // 给上一张和下一张添加点击事件
130             prev.addEventListener('click', function () {
131                 // 更改下标
132                 index = --index === -1 ? arr.length - 1 : index;
133                 //   显示图片
134                 img.src = arr[index];
135                 // 重新渲染小圆点
136                 render()
137             })
138             next.addEventListener('click', function () {
139                 // 更改下标
140                 index = ++index === arr.length - 1 ? 0 : index;
141                 //   显示图片
142                 img.src = arr[index];
143                 // 重新渲染小圆点
144                 render()
145             })
146 
147             // 封装函数 鼠标移入前的轮播，和鼠标离开后的轮播代码重复
148             // 轮播图渲染方法
149             function autoPlay() {
150                 timeId = setInterval(function () {
151                     // 定义变量，保存默认显示的图片下标
152                     // 更改下标 注意不能一直加 因为数组长度是4，超过4让它从0开始再次轮回（用三目运算）
153                     index = ++index === arr.length ? 0 : index;
154                     // 每隔一秒更换下一张图片路径
155                     img.src = arr[index];
156 
157                     // 定时器开启时渲染小圆点重新激活
158                     render()
159                 }, 1000)
160             }
161             // 封装小圆点的渲染
162             function render() {
163                 circles.innerHTML = arr.map(function (item, i) {
164                     // i是当前小圆点 index是当前下标
165                     return `  <span class=${index === i ? 'active' : ''}></span>`;
166                     // 数组转字符串用join
167                 }).join('');
168             }
169         </script>

案例总结：

1、图片要放入数组，添加定时器每秒钟让图片换下一张可以调用下标来完成，数字超过图片数量从第一张开始播放。

2、添加鼠标移入移出事件，鼠标移入清除定时器，鼠标离开自动开启定时器同时开启自动轮播。

3、给上一张下一张按钮添加点击事件，每次点击下标改变图片轮播图更换

注意：重复代码请封装函数，避免代码冗余，以便于复用代码。

结语：荣姐，加油！！！

这篇关于js实现轮播图的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js实现轮播图

相关编程文章