本文实例为大家分享了js实现点击按钮切换轮播图的具体代码，供大家参考，具体内容如下
菜单区域实现
划过主菜单显示子菜单
轮播区域实现
1、点击图片中左右箭头，分别跳转上一张与下一张
（1）点击上一张图其实就是让一个变量进行递减，点击下一张图就是让变量递增；（控制索引最大最小值）
2、点击右下角小圆也可以进行图片的跳转
（1）通过索引让变量进行随意的修改
3、每间隔3s进行轮播图的自动切换，鼠标放在图片上清除自动切换
（1）定时器
4、鼠标放在主菜单上显示子菜单，离开子菜单消失。
放在子菜单上显示子菜单，离开消失。
源代码：
html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/script.js"></script></head><body> <div class="main" id="main"> <!-- 主菜单背景 --> <div class="menu-box"></div> <!-- 主菜单 --> <div class="menu-content" id="menu-content"> <div class="menu-item"> <a href=""> <span>手机、配件</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>电脑</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用电器</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i class="icon"></i> </a> </div> </div> <!-- 子菜单 --> <div class="sub-menu hide" id="sub-menu"> <!-- 子菜单背景 --> <div class="inner-box"> <!-- 子菜单内容 --> <div class="sub-inner-box"> <div class="title">手机、配件</div> <div class="sub-row"> <span class="bold mr10">手机通讯：</span> <a href="">手机</a> <span class="ml10 mr10">/</span> <a href="">手机维修</a> <span class="ml10 mr10">/</span> <a href="">以旧换新</a> </div> <div class="sub-row"> <span class="bold mr10">手机配件：</span> <a href="">手机壳</a> <span class="ml10 mr10">/</span> <a href="">手机储蓄卡</a> <span class="ml10 mr10">/</span> <a href="">数据线</a> <span class="ml10 mr10">/</span> <a href="">充电器</a> <span class="ml10 mr10">/</span> <a href="">电池</a> </div> <div class="sub-row"> <span class="bold mr10">运营商：</span> <a href="">中国联通</a> <span class="ml10 mr10">/</span> <a href="">中国移动</a> <span class="ml10 mr10">/</span> <a href="">中国电信</a> </div> <div class="sub-row"> <span class="bold mr10">智能设备：</span> <a href="">智能手环</a> <span class="ml10 mr10">/</span> <a href="">智能家居</a> <span class="ml10 mr10">/</span> <a href="">智能手表</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娱乐：</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">音响</a> <span class="ml10 mr10">/</span> <a href="">收音机</a> <span class="ml10 mr10">/</span> <a href="">麦克风</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">电脑</div> <div class="sub-row"> <span class="bold mr10">电脑：</span> <a href="">笔记本</a> <span class="ml10 mr10">/</span> <a href="">平板</a> <span class="ml10 mr10">/</span> <a href="">一体机</a> </div> <div class="sub-row"> <span class="bold mr10">电脑配件：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">CPU</a> <span class="ml10 mr10">/</span> <a href="">主板</a> <span class="ml10 mr10">/</span> <a href="">硬盘</a> <span class="ml10 mr10">/</span> <a href="">电源</a> <span class="ml10 mr10">/</span> <a href="">显卡</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">游戏设备：</span> <a href="">游戏机</a> <span class="ml10 mr10">/</span> <a href="">耳机</a> <span class="ml10 mr10">/</span> <a href="">游戏软件</a> </div> <div class="sub-row"> <span class="bold mr10">网络产品：</span> <a href="">路由器</a> <span class="ml10 mr10">/</span> <a href="">网络机顶盒</a> <span class="ml10 mr10">/</span> <a href="">交换机</a> <span class="ml10 mr10">/</span> <a href="">存储卡</a> <span class="ml10 mr10">/</span> <a href="">网卡</a> </div> <div class="sub-row"> <span class="bold mr10">外部产品：</span> <a href="">鼠标</a> <span class="ml10 mr10">/</span> <a href="">键盘</a> <span class="ml10 mr10">/</span> <a href="">U盘</a> <span class="ml10 mr10">/</span> <a href="">移动硬盘</a> <span class="ml10 mr10">/</span> <a href="">鼠标垫</a> <span class="ml10 mr10">/</span> <a href="">电脑清洁</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家用电器</div> <div class="sub-row"> <span class="bold mr10">电视：</span> <a href="">国产品牌</a> <span class="ml10 mr10">/</span> <a href="">韩国品牌</a> <span class="ml10 mr10">/</span> <a href="">欧美品牌</a> </div> <div class="sub-row"> <span class="bold mr10">空调：</span> <a href="">显示器</a> <span class="ml10 mr10">/</span> <a href="">柜式</a> <span class="ml10 mr10">/</span> <a href="">中央</a> <span class="ml10 mr10">/</span> <a href="">壁挂式</a> </div> <div class="sub-row"> <span class="bold mr10">冰箱：</span> <a href="">多门</a> <span class="ml10 mr10">/</span> <a href="">对开门</a> <span class="ml10 mr10">/</span> <a href="">三门</a> <span class="ml10 mr10">/</span> <a href="">双门</a> </div> <div class="sub-row"> <span class="bold mr10">洗衣机：</span> <a href="">滚筒式洗衣机</a> <span class="ml10 mr10">/</span> <a href="">迷你洗衣机</a> <span class="ml10 mr10">/</span> <a href="">洗烘一体机</a> </div> <div class="sub-row"> <span class="bold mr10">厨房电器：</span> <a href="">抽烟机</a> <span class="ml10 mr10">/</span> <a href="">洗碗机</a> <span class="ml10 mr10">/</span> <a href="">燃气灶</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家具</div> <div class="sub-row"> <span class="bold mr10">家纺：</span> <a href="">被子</a> <span class="ml10 mr10">/</span> <a href="">枕头</a> <span class="ml10 mr10">/</span> <a href="">四件套</a> <span class="ml10 mr10">/</span> <a href="">床垫</a> </div> <div class="sub-row"> <span class="bold mr10">灯具：</span> <a href="">台灯</a> <span class="ml10 mr10">/</span> <a href="">顶灯</a> <span class="ml10 mr10">/</span> <a href="">节能灯</a> <span class="ml10 mr10">/</span> <a href="">应急灯</a> </div> <div class="sub-row"> <span class="bold mr10">厨具：</span> <a href="">烹饪锅具</a> <span class="ml10 mr10">/</span> <a href="">餐具</a> <span class="ml10 mr10">/</span> <a href="">菜板刀具</a> </div> <div class="sub-row"> <span class="bold mr10">家装：</span> <a href="">地毯</a> <span class="ml10 mr10">/</span> <a href="">沙发垫套</a> <span class="ml10 mr10">/</span> <a href="">装饰字画</a> <span class="ml10 mr10">/</span> <a href="">照片墙</a> <span class="ml10 mr10">/</span> <a href="">窗帘</a> </div> <div class="sub-row"> <span class="bold mr10">生活日用：</span> <a href="">收纳用品</a> <span class="ml10 mr10">/</span> <a href="">浴室用品</a> <span class="ml10 mr10">/</span> <a href="">雨伞雨衣</a> </div> </div> </div> </div> <!-- 焦点图 --> <div class="banner" id="banner"> <!-- 鼠标悬停停止自动轮播的区域 --> <section class="cease" id="cease"></section> <a href=""> <div class="banner-slide slide1"></div> </a> <a href=""> <div class="banner-slide slide2"></div> </a> <a href=""> <div class="banner-slide slide3"></div> </a> </div> <!-- 按钮 --> <a href="javascript:void(0)" class="button prev" id="prev"></a> <a href="javascript:void(0)" class="button next" id="next"></a> <div class="dots" id="dots"> <span class="active"></span> <span></span> <span></span> </div> </div></body></html> |
css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
*{ margin: 0; padding: 0;}/*通配符选择器，外边距，内边距为0*/body{ font-family: "微软雅黑"; color: #14191e;}/*字体，字体颜色*/@font-face{ font-family: 'iconfont';/*自定义名称，要有意义，不准数字*/ src: url('../font/iconfont.eot');/*兼容ie9以上版本*/ src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/*兼容ie6-8版本*/ url('../font/iconfont.ttf') format('truetype'),/*主要针对手机端浏览器 safari android ios*/ url('../font/iconfont.woff') format('woff'),/*兼容所有浏览器 */ url('../font/iconfont.svg#iconfont') format('svg');/*针对ios端开发 legacy ios*//* font-weight: bold;<字体加粗> font-style: normal;默认的正常显示*/}/*获取下载的字体*/a{ text-decoration: none;}/*没有下划线*/a:link,a:visited{ color: #5e5e5e;}/*联合选择器，未访问连接时与已经访问链接时的字体颜色*/.main{ width: 1200px; height: 460px; margin: 30px auto; overflow: hidden; position: relative;}/*最大框架：宽；高；外边距，上下30px，左右居中；溢出的部分隐藏；相对定位*/.banner{ width: 1200px; height: 460px; overflow: hidden; cursor: pointer;}/*焦点图：宽；高；溢出的部分隐藏；小手标志*/.banner-slide{ width: 1200px; height: 460px; float: right; background-repeat: no-repeat; display: none;}/*三个图片：宽；高；右浮动，背景不重复;全部隐藏*/.slide1{ background-image: url(../img/bg1.jpg); display: block;}/*第一个图片;块级元素显示*/.slide2{ background-image: url(../img/bg2.jpg);}/*第二个图片*/.slide3{ background-image: url(../img/bg3.jpg);}/*第三个图片*/.button{ position: absolute; width: 40px; height: 80px; right: 0; background: url(../img/arrow.png) center center no-repeat; top: 50%; margin-top: -40px;}/*左右两个按钮；宽；高；相对main绝对定位，距右0，距上50%；背景图片，水平垂直居中，不重复；外上边距-40px；*/.button:hover{ background-color: #333; opacity: 0.8; filter: alpha(opacity=80);}/*鼠标悬浮在上面时状态：背景颜色，透明度。照顾IE浏览器*/.prev{ left: 244px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}/*左按钮相对上面：靠左244px，定位左的优先级高于右；旋转180度*/.dots{ position: absolute; right: 24px; bottom: 24px; line-height: 12px;}/*下面三个选择圆：相对main绝对定位，距右，距下，行间距12px；*/.dots span{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(7,17,27,.4); margin-left: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset; cursor: pointer;}/*子孙后代选择器：转换为块级元素并列一排；宽；高；削圆；背景颜色；外左边距，让他们之间有距离；盒子阴影，水平偏移量，垂直偏移量，模糊度，扩展多少，颜色模糊度，内阴影;小手标志*/.dots .active{ background-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.4) inset;}/*背景颜色，同上*/.menu-box{ position: absolute; left: 0; top: 0; width: 244px; height: 460px; background: rgba(7,17,27,.3); z-index: 1;}/*主菜单背景，相对main绝对定位，左上偏移；宽；高；背景颜色模糊度；层叠模式数字大的在上面显示*/.menu-content{ position: absolute; left: 0; top: 0; width: 244px; height: 460px; z-index: 2;}/*主菜单（因为菜单不需要模糊度所以单独拿出来设置css样式）*/.menu-item{ height: 64px; line-height: 66px; cursor: pointer; padding: 0 24px;}/*主菜单的每个标题，宽；行间距；因为是链接，浮在上面显示小手标志；内边距，上下0，左右24px；下划线两边留空*/.menu-item a{ display: block; color: #fff; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.2); height: 63px; position: relative;}/*转换为块级元素；字体颜色；字体大小；下边框，粗细，实线，颜色透明度；高；相对定位*/.menu-item:last-child a{ border-bottom:none;}/*menu-item的最后一个元素a；没有下边框*/.menu-item i{ position: absolute; right: 12px; top: 2px; color: rgba(255,255,255,.5); font-style: normal; font-weight: normal; font-family: "iconfont"; font-size: 24px;}/*子孙后代选择器：相对a绝对定位；右下偏移；字体颜色模糊度；没有斜体；没有加粗；字体；字体大小*/.sub-menu{ width: 730px; height: 458px; position: absolute; left: 244px; top: 0; background: #fff; z-index: 50; border: 1px solid #d9dde1; box-shadow: 0 4px 8px 0px rgba(0,0,0,.1);}/*子菜单：宽；高；相对main绝对定位，左上偏移；背景颜色；层叠模式数字大的在上面显示；边框；盒子阴影*/.inner-box{ width: 100%; height: 100%; background: url(../img/fe.png); display: none;}/*子菜单背景：宽；高；背景图片;全部隐藏*/.sub-inner-box{ width: 652px; margin-left: 40px; overflow: hidden;}/*子菜单内容；宽；外左边距；溢出的内容隐藏*/.title{ font-size: 16px; color: #f01414; line-height: 16px; font-weight: bold; margin: 28px 0 30px 0;}/*子菜单内容的标题：字体大小；颜色；行高；粗体；外边距*/.sub-row{ margin-bottom: 25px;}/*子菜单内容：外下边距让他们之间有距离*/.bold{ font-weight: bold;}/*子标题：字体加粗*/.ml10{ margin-left: 10px;}/*内容和斜杠之间的左边距离*/.mr10{ margin-right: 10px;}/*内容、子标题和斜杠之间的右边距离*/.hide{ display: none;}/*隐藏子菜单*/ |
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
// 声明全局变量window.onload=function(){ var index = 0,//当前显示图片的索引，默认值为0 timer = null, //定时器 cease = byId("cease"),//鼠标悬停停止自动轮播的区域 prev = byId("prev"),//上一张 next = byId("next"),//下一张 banner = byId("banner"),//焦点图的爷爷 pics = banner.getElementsByTagName('div'),//焦点图 dots = byId("dots").getElementsByTagName('span'),//圆点 menuContent = byId("menu-content"),//主菜单 menuItems = menuContent.getElementsByClassName("menu-item"),//主菜单的标题 subMenu = byId("sub-menu"),//子菜单 innerBox = subMenu.getElementsByClassName("inner-box"),//子菜单的标题 mlen = menuItems.length, size = pics.length, llen = innerBox.length; // console.log(size);console.log(lis_1[0]);lis_1[0].onclick = function(){ department.className = 'hide' hospital.className = 'hospital' lis_1[0].className = 'li_1'}lis_1[1].onclick = function(){ department.className = '' hospital.className = 'hospital hide' lis_1[1].className = 'li_1'}//封装getElementById（）三元运算符function byId(id){ return typeof(id) === "string" ? document.getElementById(id):id;}/*封装通用事件绑定方法； element绑定事件的DOM元素 事件名 事件处理程序*/function addHandler(element,type,handler){ //针对非IE浏览器 if (element,addEventListener) { element.addEventListener(type,handler,true); } //IE浏览器支持DOM2级 else if (element,attachEvent) { element.attachEvent('on' + type,handler); } //IE浏览器不支持DOM2级，使用DOM0级 else{ element['on' + type] = handler; //变量不可以.type，事件可以.； }}//封装函数，切换图片function changImg(){ //遍历所有图片，将图片隐藏，将圆点上的类清除 for(var i=0;i<size;i++){ pics[i].style.display = 'none'; dots[i].className = ""; } //显示当前图片 pics[index].style.display = 'block'; //当前圆点高亮显示 dots[index].className = "active";}// 点击下一张按钮显示下一张图片addHandler(next,"click",function(){ index++; if (index>=size) index = 0; changImg();});// 点击上一张按钮显示上一张图片addHandler(prev,"click",function(){ index--; if (index<0) index = size-1; changImg();});//点击圆点索引切换图片for(var j=0;j<size;j++){ dots[j].setAttribute('tid',j); addHandler(dots[j],'click',function(){ //自定义属性不可以直接点，需用getAttribute index = this.getAttribute('tid'); changImg(); })}//定时器,开启自动轮播function startAutoPlay(){ timer = setInterval(function(){ index++; if (index>=size) index = 0; changImg(); },3000)}//清除定时器，停止自动轮播function ceaseAutoPlay(){ if(timer){ clearInterval(timer); }}//封装函数，取消所有主菜单背景function bgNone(){ for(var n=0;n<mlen;n++){ menuItems[n].style.background = 'none'; }}//封装函数，子菜单和主菜单背景显示function menuItemsBg(){ //显示子菜单所在的背景 subMenu.className = "sub-menu"; //获取当前主菜单的索引 index = this.getAttribute('data-index'); //遍历所有的子菜单innerbox，将它们隐藏 for(var l=0;l<llen;l++){ //隐藏所有的子菜单 innerBox[l].style.display = "none"; //所有主菜单取消背景 menuItems[l].style.background = 'none'; } //找到当前子菜单，让其显示出来 innerBox[index].style.display = "block"; //当前主菜单显示背景 menuItems[index].style.background = 'rgba(0,0,0,.1)';}//鼠标滑过主菜单和子菜单for(var k=0;k<mlen;k++){ //给所有主菜单定义属性，表明它的索引 menuItems[k].setAttribute('data-index',k); //给所有子菜单定义属性，表明它的索引 innerBox[k].setAttribute('data-index',k); addHandler(menuItems[k],"mouseover",menuItemsBg) addHandler(innerBox[k],"mouseover",menuItemsBg)}//鼠标滑入子菜单，显示子菜单addHandler(subMenu,"mouseover",function(){ subMenu.className = "sub-menu";})//鼠标离开主菜单，隐藏子菜单addHandler(menuContent,"mouseout",function(){ subMenu.className = "sub-menu hide"; bgNone(); })//鼠标离开子菜单，隐藏子菜单addHandler(subMenu,"mouseout",function(){ subMenu.className = "sub-menu hide"; bgNone();})//鼠标滑入cease，停止轮播addHandler(cease,"mouseover",ceaseAutoPlay);//鼠标离开cease，继续轮播addHandler(cease,"mouseout",startAutoPlay);//自动开启轮播startAutoPlay();} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/a815886696/article/details/108714787
