ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js实现轮播图

2022-09-08 20:30:08  阅读:160  来源: 互联网

标签:index arr 轮播 img 实现 js slide var 小圆点




  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、给上一张下一张按钮添加点击事件,每次点击下标改变图片轮播图更换

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

结语:荣姐,加油!!!

 <style>         * {             padding: 0;             margin: 0;         }         /* 1.轮播图容器  */         .slide {             width: 600px;             height: 400px;             margin: 100px auto;             position: relative;         }
        /* 1.1图片 */         .slide img {             width: 100%;             height: 100%;         }         /* 1.2上一张按钮 */         .slide .prev,         .slide .next {             position: absolute;             width: 50px;             height: 50px;             line-height: 50px;             background-color: #666;             top: 50%;             text-align: center;             border-radius: 50%;             color: #fff;             font-size: 26px;             transform: translateY(-50%);         }         .slide .prev {             left: 10px;         }
        /* 1.3下一张按钮 */         .slide .next {             right: 10px;         }
        /* span小圆点 */         .circles {             position: absolute;             bottom: 10px;             width: 160px;             height: 16px;             left: 50%;             z-index: 10;             transform: translateX(-50%);         }
        .circles span {             display: inline-block;             width: 16px;             height: 16px;             margin: 0 10px;             background-color: #fff;             border-radius: 50%;         }
        .circles .active {             background-color: aqua;         }     </style> </head>
<body>     <!-- 轮播图容器 -->     <div class="slide">         <!--1.1 图片 -->         <img src="./img/02.webp" alt="">         <!-- 1.2上一张按钮 -->         <div class="prev">             < </div>                 <!-- 1.3下一张按钮 -->                 <div class="next">></div>                 <!--1.4小圆点  -->                 <div class="circles">                     <!-- 用map方法动态渲染小圆圈 -->                     <!-- <span class="active"></span>                     <span></span>                     <span></span>                     <span></span> -->                 </div>
        </div>
        <script>             // 定义数组,保存所有图片路径             var arr = ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp']             // 获取图片的dom元素             var img = document.querySelector('img');
            var slide = document.querySelector('.slide');
            // 默认从0开始             var index = 0;             // 定义变量保存定时器标识             var timeId;
            // 获取小圆点大容器             var circles = document.querySelector('.circles')             // 获取上一张按钮             var prev = document.querySelector('.prev')
            // 获取下一张按钮             var next = document.querySelector('.next')

            // 开启定时器 更换图片集             // 开启自动轮播 调用下面封装的方法             autoPlay()             //   渲染小圆点             render()             // 给slide添加鼠标移入和移出时间             slide.addEventListener('mouseover', function () {                 // 鼠标移入清除定时器                 clearInterval(timeId)             })             slide.addEventListener('mouseout', function () {                 // 鼠标离开自动开启定时器:就是把上面的代码复制一份                 // 开启自动轮播 调用下面封装的方法                 autoPlay()                
            })             // 给上一张和下一张添加点击事件             prev.addEventListener('click', function () {                 // 更改下标                 index = --index === -1 ? arr.length - 1 : index;                 //   显示图片                 img.src = arr[index];                 // 重新渲染小圆点                 render()             })             next.addEventListener('click', function () {                 // 更改下标                 index = ++index === arr.length - 1 ? 0 : index;                 //   显示图片                 img.src = arr[index];                 // 重新渲染小圆点                 render()             })
            // 封装函数 鼠标移入前的轮播,和鼠标离开后的轮播代码重复             // 轮播图渲染方法             function autoPlay() {                 timeId = setInterval(function () {                     // 定义变量,保存默认显示的图片下标                     // 更改下标 注意不能一直加 因为数组长度是4,超过4让它从0开始再次轮回(用三目运算)                     index = ++index === arr.length ? 0 : index;                     // 每隔一秒更换下一张图片路径                     img.src = arr[index];
                    // 定时器开启时渲染小圆点重新激活                     render()                 }, 1000)             }             // 封装小圆点的渲染             function render() {                 circles.innerHTML = arr.map(function (item, i) {                     // i是当前小圆点 index是当前下标                     return `  <span class=${index === i ? 'active' : ''}></span>`;                     // 数组转字符串用join                 }).join('');             }         </script>

标签:index,arr,轮播,img,实现,js,slide,var,小圆点
来源: https://www.cnblogs.com/meirongliu/p/16670783.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有