HTMLCSSJS实现⼆级菜单导航+轮播图
学习了HTML、CSS和JavaScript后，总得做点东西练练⼿，于是⼲脆跟着效果做了个类似于慕课⽹的轮播效果，配上⼀个⼆级菜单导航，具体效果如下：
⾸先来说说这个项⽬中⽤的⽐较多的知识点：
1. CSS定位——绝对定位和相对定位的搭配使⽤，⽤的⾮常多
2. JavaScript——实现三秒换图、按下按钮换图、按下⼩圆点换图、⿏标移动到主菜单上即显⽰⼆级菜单等功能
3. div块标签
⾸先是整个页⾯的HTML代码
<!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>
<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>
<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>
<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>
</div>
<script src="js/script.js"></script>
</body>
</html>
接着是CSS样式代码
*{
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/");
src:url("../img/")format("embedded-opentype"),
url("../img/font/iconfont.woff")format("woff"),
url("../img/f")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;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论