HTML/CSS/JS实现二级菜单导航+轮播图
学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下：
首先来说说这个项目中用的比较多的知识点：
- CSS定位——绝对定位和相对定位的搭配使用，用的非常多
- JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能
- div块标签
首先是整个页面的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="#">CPUa>
<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">
<a href="">
<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 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>
<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/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代码
//使用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//为每一个菜单项添加一个自定义的索引属性,因为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();