JavaScript--轮播图_带计时器
2024-06-08 05:00:37
轮播图效果：
实现的功能：
1.鼠标移入，左右按钮显示
2.右下叫小圆点鼠标移入，进入下一张图
3.左右按钮点击，右下小圆点页跟随变更
4.自动开启计时器，鼠标移入右下叫小圆点区，计时器停止，鼠标移出小圆点区，计时器继续（自动下一张图片）
5.移入左右按钮，计时器消失，移出左右按钮计时器出现，封装了公共切换图片
实现代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>总有人比你富有，却比你更聪明更努力！</title>
6 <style type="text/css">
7 /* css 重置 */
8 * {
9 margin: 0;
10 padding: 0;
11 list-style: none;
12 }
13
14 body {
15 background: #fff;
16 font: normal 12px/22px 宋体;
17 }
18
19 img {
20 border: 0;
21 }
22
23 a {
24 text-decoration: none;
25 color: #333;
26 }
27
28 /* 本例子css */
29 .slideBox {
30 width: 790px;
31 height: 340px;
32 overflow: hidden;
33 position: relative;
34 border: 1px solid #ddd;
35 margin: 50px auto;
36 }
37
38 .bd .hd {
39 height: 20px;
40 overflow: hidden;
41 position: absolute;
42 right: 5px;
43 bottom: 5px;
44 z-index: 1;
45 }
46
47 .bd .hd ul {
48 overflow: hidden;
49 zoom: 1;
50 float: left!important;
51 }
52
53 .bd .hd ul li {
54 float: left;
55 margin-right: 5px!important;
56 width: 20px;
57 height: 20px;
58 line-height: 20px;
59 font-weight: bold;
60 text-align: center;
61 background: #fff;
62 cursor: pointer;
63 border-radius: 50%;
64 }
65
66 .bd .hd ul li.on {
67 background: #f00;
68 color: #fff;
69 }
70
71 .slideBox .bd {
72 position: relative;
73 height: 100%;
74 z-index: 0;
75 }
76
77 /* ----------------------- */
78 .slideBox .bd li {
79 zoom: 1;
80 vertical-align: middle;
81 left: 0;
82 top: 0;
83 }
84
85 .slideBox .bd li.first {
86 z-index: 1;
87 }
88
89 /* ----------------------- */
90 .slideBox .bd img {
91 width: 790px;
92 height: 340px;
93 display: block;
94 }
95
96 .slideBox .prev,
97 .slideBox .next {
98 position: absolute;
99 left: 0;
100 top: 50%;
101 margin-top: -25px;
102 display: none;
103 width: 32px;
104 height: 40px;
105 background: rgba(0,0,0,0.3);
106 filter: alpha(opacity=50);
107 opacity: 0.5;
108 text-align: center;
109 font-size: 30px;
110 font-weight: bold;
111 color: #fff;
112 line-height: 40px;
113 }
114
115 .slideBox .next {
116 left: auto;
117 right: 0;
118 background-position: 8px 5px;
119 }
120
121 .slideBox .prev:hover,
122 .slideBox .next:hover {
123 filter: alpha(opacity=100);
124 opacity: 1;
125 }
126
127
128 </style>
129 </head>
130 <body>
131 <div id="slideBox" class="slideBox">
132
133 <div class="bd" id="bd">
134 <div class="hd">
135 <ul id="control">
136 <li class="on"></li>
137 <li></li>
138 <li></li>
139 <li></li>
140 <li></li>
141 </ul>
142 </div>
143
144 <ul>
145 <li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
146 </ul>
147 <a class="prev" id="prev" href="javascript:;" ><</a>
148 <a class="next" id="next" href="javascript:;">></a>
149 </div>
150
151 </div>
152 </body>
153 </html>
154 <script>
155
156 // 公共获取事件源函数
157 function $(id) {
158 return document.getElementById(id);
159 }
160 // 切换轮播图
161 function changImg(imgIndex) {
162 $('bigImg').src= imgArr[imgIndex];
163 console.log(imgIndex);
164 // 排他思想
165 for(var j = 0 ; j < liBtns.length ; j++) {
166 liBtns[j].className = "";
167 }
168 // 设置小红点样式
169 liBtns[imgIndex].className = 'on';
170 }
171 // 功能需求类似tab栏，也可参考线上轮播图效果
172 // 获取轮播图区
173 // 获取轮播图
174 var imgArr = [
175 "images/01.jpg",
176 "images/02.jpg",
177 "images/03.jpg",
178 "images/04.jpg",
179 "images/05.jpg"
180 ];
181 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
182 $('bd').onmouseover = function () {
183 $('prev').style.display = "block";
184 $('next').style.display = "block";
185 }
186 $('bd').onmouseout = function () {
187 $('prev').style.display = "none";
188 $('next').style.display = "none";
189 }
190 // 记录当前图片下标-- 为了图片索引值同步
191 var imgIndex = 0;
192
193
194
195 /* 计时器,3秒切换到下一张轮播图*/
196 var t; // 计时器变量
197 function interval() {
198 t = setInterval(
199 function () {
200 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
201 // 设置下一张图片
202 changImg(imgIndex);
203 }
204 ,3000);
205 }
206
207 // 鼠标移入圆点区，关闭计时器
208 $('control').onmouseover = function () {
209 clearInterval(t);
210 }
211 // 鼠标移开圆点区，开启计时器自动切换轮播图
212 $('control').onmouseout = function () {
213 interval();
214 }
215 // 鼠标移入上，下一张图片的按钮是关闭计时器
216 $('next').onmouseover = function () {
217 clearInterval(t);
218 }
219 $('prev').onmouseover = function () {
220 clearInterval(t);
221 }
222
223 // 把鼠标移出上下一张图片区域,开启计时器
224 $('next').onmouseout = function () {
225 interval();
226 }
227 $('prev').onmouseout = function () {
228 interval();
229 }
230 interval();
231
232
233
234 // 圆点鼠标移到上面图片轮播
235 var liBtns = $('control').getElementsByTagName('li');
236 for (var i = imgIndex ; i < liBtns.length ; i++) {
237 // 设置当前按钮下标
238 liBtns[i].index = i;
239 liBtns[i].onmouseover = function () {
240 changImg(this.index);
241 imgIndex = this.index;
242 }
243 }
244
245 /*上下轮播图*/
246 // 下一张轮播图
247 $('next').onclick = function () {
248 // 下一张图片的地址是当前图片地在数组中的下标加1,并且在图片下标等于数组长度的时，重调图片数组下标为0，完成循环轮播
249 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
250 // 设置下一张图片
251 changImg(imgIndex);
252
253
254 }
255 // 上一张轮播图
256 $('prev').onclick = function () {
257 // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
258 imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
259 // 设置上一张轮图片
260 changImg(imgIndex);
261 }
262
263
264
265
266 </script>下面是轮播图的小红点是JS动态生成的：
主要与上面代码的区别是： 灰色代码区的HTML结构部分 黄色代码区域的JS部分
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>总有人比你富有，却比你更聪明更努力！</title>
6 <style type="text/css">
7 /* css 重置 */
8 * {
9 margin: 0;
10 padding: 0;
11 list-style: none;
12 }
13
14 body {
15 background: #fff;
16 font: normal 12px/22px 宋体;
17 }
18
19 img {
20 border: 0;
21 }
22
23 a {
24 text-decoration: none;
25 color: #333;
26 }
27
28 /* 本例子css */
29 .slideBox {
30 width: 790px;
31 height: 340px;
32 overflow: hidden;
33 position: relative;
34 border: 1px solid #ddd;
35 margin: 50px auto;
36 }
37
38 .bd .hd {
39 height: 20px;
40 overflow: hidden;
41 position: absolute;
42 right: 5px;
43 bottom: 5px;
44 z-index: 1;
45 }
46
47 .bd .hd ul {
48 overflow: hidden;
49 zoom: 1;
50 float: left!important;
51 }
52
53 .bd .hd ul li {
54 float: left;
55 margin-right: 5px!important;
56 width: 20px;
57 height: 20px;
58 line-height: 20px;
59 font-weight: bold;
60 text-align: center;
61 background: #fff;
62 cursor: pointer;
63 border-radius: 50%;
64 }
65
66 .bd .hd ul li.on {
67 background: #f00;
68 color: #fff;
69 }
70
71 .slideBox .bd {
72 position: relative;
73 height: 100%;
74 z-index: 0;
75 }
76
77 /* ----------------------- */
78 .slideBox .bd li {
79 zoom: 1;
80 vertical-align: middle;
81 left: 0;
82 top: 0;
83 }
84
85 .slideBox .bd li.first {
86 z-index: 1;
87 }
88
89 /* ----------------------- */
90 .slideBox .bd img {
91 width: 790px;
92 height: 340px;
93 display: block;
94 }
95
96 .slideBox .prev,
97 .slideBox .next {
98 position: absolute;
99 left: 0;
100 top: 50%;
101 margin-top: -25px;
102 display: none;
103 width: 32px;
104 height: 40px;
105 background: rgba(0,0,0,0.3);
106 filter: alpha(opacity=50);
107 opacity: 0.5;
108 text-align: center;
109 font-size: 30px;
110 font-weight: bold;
111 color: #fff;
112 line-height: 40px;
113 }
114
115 .slideBox .next {
116 left: auto;
117 right: 0;
118 background-position: 8px 5px;
119 }
120
121 .slideBox .prev:hover,
122 .slideBox .next:hover {
123 filter: alpha(opacity=100);
124 opacity: 1;
125 }
126
127
128 </style>
129 </head>
130 <body>
131 <div id="slideBox" class="slideBox">
132
133 <div class="bd" id="bd">
134 <div class="hd">
135 <ul id="control">
136
137 </ul>
138 </div>
139
140 <ul>
141 <li><a href="#"><img id="bigImg" src="data:images/01.jpg"/></a></li>
142 </ul>
143 <a class="prev" id="prev" href="javascript:;" ><</a>
144 <a class="next" id="next" href="javascript:;">></a>
145 </div>
146
147 </div>
148 </body>
149 </html>
150 <script>
151 // 记录当前图片下标-- 为了图片索引值同步
152 var imgIndex = 0;
153 var t; // 计时器变量
154 // 公共获取事件源函数
155 function $(id) {
156 return document.getElementById(id);
157 }
158 // 切换轮播图
159 function changImg(imgIndex) {
160 $('bigImg').src= imgArr[imgIndex];
161 console.log(imgIndex);
162 // 排他思想
163 for(var j = 0 ; j < liBtns.length ; j++) {
164 liBtns[j].className = "";
165 }
166 // 设置小红点样式
167 liBtns[imgIndex].className = 'on';
168 }
169 // 功能需求类似tab栏，也可参考线上轮播图效果
170 // 获取轮播图区
171 // 获取轮播图
172 var imgArr = [
173 "images/01.jpg",
174 "images/02.jpg",
175 "images/03.jpg",
176 "images/04.jpg",
177 "images/05.jpg"
178 ];
179
180 //自动生成li
181 // 默认设置第一个li的className是on
182 // 生成第一个默认li带并设置className = "on"
183 var liArr = [];
184 for(var i = 0 ; i < imgArr.length ; i++ ) {
185 liArr.push('<li></li>')
186 }
187 // 转换成字符串
188 $('control').innerHTML = liArr.join('');
189 // 设置属性
190 $('control').children[0].setAttribute("class","on")
191
192
193
194 // 前后按钮功能：1.鼠标移入轮播图区，显示前后按钮，移出消失前后按钮
195 $('bd').onmouseover = function () {
196 $('prev').style.display = "block";
197 $('next').style.display = "block";
198 }
199 $('bd').onmouseout = function () {
200 $('prev').style.display = "none";
201 $('next').style.display = "none";
202 }
203
204
205 //下一张图片函数提取
206 function nextImg() {
207 imgIndex+1 == imgArr.length ? imgIndex = 0:imgIndex ++;
208 // 设置下一张图片
209 changImg(imgIndex);
210 }
211
212 /* 计时器,3秒切换到下一张轮播图*/
213
214 function interval() {
215 t = setInterval(nextImg,3000);
216 }
217
218 // 鼠标移入圆点区，关闭计时器
219 $('control').onmouseover = function () {
220 clearInterval(t);
221 }
222 // 鼠标移开圆点区，开启计时器自动切换轮播图
223 $('control').onmouseout = function () {
224 interval();
225 }
226 // 鼠标移入上，下一张图片的按钮是关闭计时器
227 $('next').onmouseover = function () {
228 clearInterval(t);
229 }
230 $('prev').onmouseover = function () {
231 clearInterval(t);
232 }
233
234 // 把鼠标移出上下一张图片区域,开启计时器
235 $('next').onmouseout = function () {
236 interval();
237 }
238 $('prev').onmouseout = function () {
239 interval();
240 }
241 interval();
242
243
244
245 // 圆点鼠标移到上面图片轮播
246 var liBtns = $('control').getElementsByTagName('li');
247 for (var i = imgIndex ; i < liBtns.length ; i++) {
248 // 设置当前按钮下标
249 liBtns[i].index = i;
250 liBtns[i].onmouseover = function () {
251 changImg(this.index);
252 imgIndex = this.index;
253 }
254 }
255
256 /*上下轮播图*/
257 // 下一张轮播图
258 $('next').onclick = nextImg;
259 // 上一张轮播图
260 $('prev').onclick = function () {
261 // 下一张图片的地址是当前图片地在数组中的下标减1，并且在图片下标小于0时，重调数组下标为图片数组最后一张图片，完成循环轮播
262 imgIndex-1 < 0 ? imgIndex = imgArr.length-1 :imgIndex --;
263 // 设置上一张轮图片
264 changImg(imgIndex);
265 }
266
267
268
269
270
271
272 </script>转载于:https://www.cnblogs.com/mrszhou/p/7667448.html
JavaScript--轮播图_带计时器相关推荐
- JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...
- js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
- 轮播图代码,带定时器和小圆圈(易懂)
简单的显示隐藏(带小圆圈和左右按钮,js写) <!DOCTYPE html> <html lang = "en" > <head ><me ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
- 原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程 本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
- JavaScript轮播图（面向对象）
步骤 轮播图1 HTML+CSS 轮播图2 动态生成页面 通过 JavaScript程序 生成 div标签中 所有 轮播图需要的标签 生成 ul ol div 标签节点 根据数组动态生成 原始 ul& ...
- 阶段二 网页搭建入门之javaScript与前端案例 javaScript轮播图
加粗样式## 效果图 图片素材 html <!doctype html> <html lang="en"> <head><meta cha ...
- javascript轮播图（缓冲运动）
哈喽,大家好呀!我又来咯!相信大家在翻网页的时候都会看到首页的轮播图!今天讲讲实现原理,感觉有用就收藏吧! 轮播图主要是利用缓冲运动来实现图片的切换,这样看起来比较有画面感哈! 那么什么叫做缓冲运动呢 ...
- vue pc端 商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
最新文章
- 腾讯云与每日优鲜便利购战略签约 引领无人零售2.0时代发展
- caioj 1158 欧拉函数
- 深入浅出Spring Boot，你和大神的差距，就只有这份文档的距离
- 关闭eslint检验；vue-cli3搭建的vue项目关闭eslint；脚手架3关闭eslint；
- 上世纪八九十年代的收录放音机拆解
- Oracle 20c 新特性：数据泵 expdp / impdp 的EXCLUDE和CHECKSUM增强
- Java案例：Java版生命游戏
- 47 - 算法 - 记住常用位运算-Leetcode-136-只出现一次的数字
- [git] gnutls_handshake() failed
- 《C++游戏编程入门（第4版）》——1.2 编写第一个C++程序
- 毕业同学录网站搭建源码分享
- 中兴云桌面服务器,中兴云桌面解决方案.pdf
- 在c语言中对于整型变量采用哪两种存储形式,在C语言中的实型变量分为2种类型，它们是（）和（）...
- Ubuntu 20.04 + mysql 8.0.27 用户名和密码修改(非常实用)
- 九度OJ题目1035：找出直系亲属
- Android初学者需掌握的几点经验：该如何自学Android开发？（Android自学资料大全）
- 【重新安装MySql5.7.24 / MySql57过程】好多个错误，慢慢改好的
- JS实现简单的网页文本转语音阅读
- 用PS修改图片上的数字
- 等维递推GM(1,1)模型、无偏灰色模型