HTML/CSS/JS实现二级菜单导航+轮播图

69 阅读 0 评论 46 点赞

我是靠谱客的博主追寻白猫，最近开发中收集的这篇文章主要介绍HTML/CSS/JS实现二级菜单导航+轮播图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

学习了HTML、CSS和JavaScript后，总得做点东西练练手，于是干脆跟着效果做了个类似于慕课网的轮播效果，配上一个二级菜单导航，具体效果如下：
这里写图片描述
首先来说说这个项目中用的比较多的知识点：

CSS定位——绝对定位和相对定位的搭配使用，用的非常多
JavaScript——实现三秒换图、按下按钮换图、按下小圆点换图、鼠标移动到主菜单上即显示二级菜单等功能
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>
                            <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>&#xe665;</i>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span>电脑</span>
                        <i>&#xe665;</i>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span>家用电器</span>
                        <i>&#xe665;</i>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="">
                        <span>家具</span>
                        <i>&#xe665;</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样式代码

*{
    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<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();