学习了HTML、CSS和JavaScript后,总得做点东西练练手,于是干脆跟着效果做了个类似于慕课网的轮播效果,配上一个二级菜单导航,具体效果如下:
首先来说说这个项目中用的比较多的知识点:
- CSS定位——绝对定位和相对定位的搭配使用,用的非常多
- JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能
- div块标签
首先是整个页面的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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图综合实例</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" id="main">
<!--主菜单的半透明层-->
<div class="menu-box"></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="mr10 ml10">/</span>
<a href="#">手机维修</a>
<span class="mr10 ml10">/</span>
<a href="#">以旧换新</a>
</div>
<div class="sub-row">
<span class="bold mr10">智能设备:</span>
<a href="#">智能手环</a>
<span class="mr10 ml10">/</span>
<a href="#">智能家居</a>
<span class="mr10 ml10">/</span>
<a href="#">智能手表</a>
<span class="mr10 ml10">/</span>
<a href="#">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娱乐</span>
<a href="#">耳机</a>
<span class="mr10 ml10">/</span>
<a href="#">音响</a>
<span class="mr10 ml10">/</span>
<a href="#">收音机</a>
<span class="mr10 ml10">/</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="mr10 ml10">/</span>
<a href="#">平板</a>
<span class="mr10 ml10">/</span>
<a href="#">一体机</a>
</div>
<div class="sub-row">
<span class="bold mr10">电脑配件:</span>
<a href="#">显示器</a>
<span class="mr10 ml10">/</span>
<a href="#">CPU</a>
<span class="mr10 ml10">/</span>
<a href="#">主板</a>
<span class="mr10 ml10">/</span>
<a href="#">硬盘</a>
<span class="mr10 ml10">/</span>
<a href="#">电源</a>
<span class="mr10 ml10">/</span>
<a href="#">显卡</a>
<span class="mr10 ml10">/</span>
<a href="#">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">游戏设备:</span>
<a href="#">游戏机</a>
<span class="mr10 ml10">/</span>
<a href="#">耳机</a>
<span class="mr10 ml10">/</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="mr10 ml10">/</span>
<a href="#">韩国品牌</a>
<span class="mr10 ml10">/</span>
<a href="#">欧美品牌</a>
</div>
<div class="sub-row">
<span class="bold mr10">空调:</span>
<a href="#">显示器</a>
<span class="mr10 ml10">/</span>
<a href="#">柜式</a>
<span class="mr10 ml10">/</span>
<a href="#">中央</a>
<span class="mr10 ml10">/</span>
<a href="#">壁挂式</a>
</div>
<div class="sub-row">
<span class="bold mr10">冰箱:</span>
<a href="#">多门</a>
<span class="mr10 ml10">/</span>
<a href="#">对开门</a>
<span class="mr10 ml10">/</span>
<a href="#">三门</a>
<span class="mr10 ml10">/</span>
<a href="#">双门</a>
</div>
<div class="sub-row">
<span class="bold mr10">洗衣机:</span>
<a href="#">滚筒式洗衣机</a>
<span class="mr10 ml10">/</span>
<a href="#">迷你洗衣机</a>
<span class="mr10 ml10">/</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="mr10 ml10">/</span>
<a href="#">枕头</a>
<span class="mr10 ml10">/</span>
<a href="#">四件套</a>
<span class="mr10 ml10">/</span>
<a href="#">床垫</a>
</div>
<div class="sub-row">
<span class="bold mr10">灯具:</span>
<a href="#">台灯</a>
<span class="mr10 ml10">/</span>
<a href="#">顶灯</a>
<span class="mr10 ml10">/</span>
<a href="#">节能灯</a>
<span class="mr10 ml10">/</span>
<a href="#">应急灯</a>
</div>
<div class="sub-row">
<span class="bold mr10">厨具:</span>
<a href="#">烹饪锅具</a>
<span class="mr10 ml10">/</span>
<a href="#">餐具</a>
<span class="mr10 ml10">/</span>
<a href="#">菜板刀具</a>
</div>
<div class="sub-row">
<span class="bold mr10">家装:</span>
<a href="#">地毯</a>
<span class="mr10 ml10">/</span>
<a href="#">沙发垫套</a>
<span class="mr10 ml10">/</span>
<a href="#">装饰字画</a>
<span class="mr10 ml10">/</span>
<a href="#">照片墙</a>
<span class="mr10 ml10">/</span>
<a href="#">窗帘</a>
</div>
</div>
</div>
</div>
<!--主菜单-->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i></i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i></i>
</a>
</div>
</div>
<!--图片轮播-->
<div class="banner" id="banner">
<!--超链接标签组合div块实现点击图片的超链接-->
<a href="">
<!--class中带空格的意思是同时将多个类的样式作用在上面-->
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<!--重叠的时候默认最后的图片出现在最上面-->
<a href="">
<div class="banner-slide slide3"></div>
</a>
</div>
<!--上一张、下一张按钮 这里的a标签只是为了按钮效果,不进行跳转,因此需要指定javascript:void(0)-->
<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是行级标签,不能设置宽高,因此在css声明的时候需要使用display:inline-block 声明为行内块元素-->
<span class="active"></span><!--active类用来改变圆点样式-->
<span></span>
<span></span>
</div>
</div>
<script src="js/script.js"></script>
</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
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
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a:link,a:visited{
/*去掉超链接的下划线*/
text-decoration: none;
color: #333;
}
body{
font-family: "Microsoft YaHei UI";
color: #14191e;
}
@font-face {
font-family: "myfont";
src: url("../img/font/iconfont.eot");
src: url("../img/font/iconfont.eot") format("embedded-opentype"),
url("../img/font/iconfont.woff") format("woff"),
url("../img/font/iconfont.ttf") format("truetype"),
url("../img/font/iconfont.svg#iconfog") format("svg");
}
.main{
width: 1200px;
height: 460px;
/**
水平居中 左右外边距30px
*/
margin: 30px auto;
overflow: hidden;
/*为了让上一张、下一张按钮能够相对这个父元素进行定位*/
position: relative;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
/*因为要让其存放图片的子元素banner-slide相对这个父元素进行定位,因此需要加上relative*/
position: relative;
}
.banner-slide{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
/*因为要实现图片的重叠,因此需要使用到绝对定位(相对banner)*/
position: absolute;
/*默认隐藏全部图片,根据slide-active类来决定显示哪张图*/
display: none;
}
.slide1{
background-image: url("../img/bg1.jpg");
}
.slide2{
background-image: url("../img/bg2.jpg");
}
.slide3{
background-image: url("../img/bg3.jpg");
}
/*用来隐藏和显示图片的类,要显示哪张图就在那张图的div上加上这个类*/
.slide-active{
display: block;
}
.button{
position: absolute;
width: 40px;
height: 80px;
left: 244px;
top: 50%;
margin-top: -40px;
background: url("../img/arrow.png") no-repeat center;
}
/*这里就体现了为什么这种轮播图使用a标签来承载图片,因为a标签有hover这个属性,可以实现鼠标放上去的特效*/
.button:hover{
/*实现鼠标放上上一张、下一张按钮时背景变透明的特效*/
background-color: #333;
opacity: 0.2;
/*适配到其他浏览器,例如IE8及之前*/
filter:alpha(opacity=20);
}
/*将向右的箭头旋转180度变成向左的箭头 表示上一张图片 */
.prev{
transform: rotate(180deg);
}
/*上一张按钮不用改样式,但是下一张要改在右边*/
.next{
left: auto;
right: 0;
background: url("../img/arrow.png") no-repeat center;
}
.dots{
position: absolute;
right: 20px;
bottom: 24px;
text-align: right;
}
/*小圆点样式*/
.dots span{
/*为了能设置行级标签span的宽高,需要将span声明为行内块元素*/
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
/*将圆点设置为半透明的深黑色*/
background: rgba(7,17,27,0.4);
line-height: 12px;
/*圆点白色描边 使用阴影实现*/
box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
margin-left: 8px;
}
/*改变被点击的小圆点的样式*/
.dots span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
background: #fff;
}
/*导航菜单半透明层*/
.menu-box{
width: 244px;
height: 460px;
position: absolute;
left: 0;
top: 0;
background: rgba(7,17,27,0.5);
opacity: 0.5;
z-index: 1;
}
/*导航菜单*/
.menu-content{
width: 244px;
height: 454px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
padding-top: 6px;
}
/*导航菜单项*/
.menu-item{
height: 64px;
line-height: 66px;
font-size: 16px;
padding: 0 24px;
position: relative;
}
.menu-item a:link, .menu-item a:visited{
color: #fff;
}
.menu-item a{
/*将a定为块元素*/
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding: 0 8px;
height: 63px;
}
.menu-item i{
position: absolute;
font-size: 24px;
font-family: "myfont";
right: 32px;
font-style: normal;
font-weight: normal;
color: rgba(255,255,255,0.5);
}
.sub-menu{
width: 730px;
height: 458px;
border: 1px solid #d9dde1;
background: #fff;
position: absolute;
left: 244px;
top: 0;
z-index: 999;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}
.inner-box{
width: 100%;
height: 100%;
background: url("../img/fe.png") no-repeat;
}
.sub-inner-box{
width: 652px;
margin-left: 40px;
overflow: hidden;
}
.title{
color: #f01414;
font-size: 16px;
line-height: 16px;
margin: 28px 0 30px 0;
font-weight: bold;
}
.sub-row{
margin-bottom: 25px;
}
.bold{
font-weight: bold;
}
/*左外边距10px类*/
.mr10{
margin-right: 10px;
}
/*右外边距10px类*/
.ml10{
margin-left: 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
//使用es5严格模式
"use strict";
//封装一个代替getElementById()的方法
function byId(id) {
//判断id的类型,必须为字符串
return typeof(id) === "string"?document.getElementById(id):id;
}
//当前图片索引
var index = 0;
//定时器
var timer = null;
//获取banner下的所有div
var pics = byId("banner").getElementsByTagName("div");
//判断banner下所有div数目
var len = pics.length;
//获得dots下所有span小圆点
var dots = byId("dots").getElementsByTagName("span");
//获取到上一张、下一张按钮的实例
var prev = byId("prev");
var next = byId("next");
//主菜单及其子项
var menu = byId("menu-content");
var menuItems = menu.getElementsByClassName("menu-item");
//子菜单及其子项
var subMenu = byId("sub-menu");
var subMenuItems = subMenu.getElementsByClassName("inner-box");
function slideImg() {
var main = byId("main");
//划过清除定时器,离开继续
main.onmouseover = function () {
//划过清除定时器
if (timer){
clearInterval(timer);
}
};
//鼠标离开触发事件
main.onmouseout = function () {
//每隔2秒执行一次换图 setInterval()方法
timer = setInterval(function () {
index++;
if (index > len-1) {
index = 0;
}
//切换图片
changeImg();
},3000);
};
//进入网页自动触发轮播
main.onmouseout();
//为小圆点绑定点击事件
setCirclePointEvent();
//上一张、下一张按钮绑定事件
setNextAndPrevButtonEvent();
}
//切换图片,改变小圆点特效
function changeImg() {
//遍历banner下所有div及dots下所有span,将div隐藏,将span清除类
for (var i = 0; i < len; i++) {
pics[i].style.display = 'none';
dots[i].className = "";
}
//根据index索引找到当前div,将其显示出来
pics[index].style.display = 'block';
dots[index].className = "active";
}
//小圆点绑定点击切换图片事件
function setCirclePointEvent() {
//遍历所有圆点实例,绑定点击事件,点击圆点切换图片
for (var i = 0; i < len; i++) {
//给所有span设置id,值为i,作为span的索引
dots[i].id = i;
dots[i].onclick = function (ev) {
//改变index为当前span的索引,this指的就是onclick负载的span
index = this.id;
//切换图片
changeImg();
};
}
}
//上一张、下一张按钮绑定事件
function setNextAndPrevButtonEvent() {
next.onclick = function () {
index++;
if (index > len-1)
{
index = 0;
}
changeImg();
};
prev.onclick = function () {
index--;
if (index < 0)
{
index = len-1;
}
changeImg();
};
}
//设置菜单导航
function setMenu() {
//遍历主菜单,绑定事件
for (var i = 0; i<menuItems.length; i++)
{
//为每一个菜单项添加一个自定义的索引属性,因为for循环内的function用i全是最大值,无法具体索引到某一个节点
menuItems[i].setAttribute("data-index",i);
//鼠标滑过触发事件
menuItems[i].onmouseover = function () {
//显示子菜单
subMenu.style.display = 'block';
//显示子菜单项
for (var j = 0; j < subMenuItems.length; j++){
subMenuItems[j].style.display = 'none';
menuItems[j].style.background = 'none';
}
var idx = this.getAttribute("data-index");
subMenuItems[idx].style.display = 'block';
this.style.background = 'rgba(0,0,0,0.1)';
};
//鼠标离开整个主菜单触发事件
menu.onmouseout = function () {
//隐藏子菜单
subMenu.style.display = 'none';
};
//保证鼠标移动到子菜单上,离开主菜单时,子菜单不会消失
subMenu.onmouseover = function () {
this.style.display = 'block';
};
//鼠标离开子菜单时,子菜单消失
subMenu.onmouseout = function () {
this.style.display = 'none';
};
}
}
//轮播图片总方法
slideImg();
//导航菜单总方法
setMenu();
最后
以上就是追寻白猫最近收集整理的关于HTML/CSS/JS实现二级菜单导航+轮播图的全部内容,更多相关HTML/CSS/JS实现二级菜单导航+轮播图内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复