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

痛定思痛。 2022-05-31 02:57 566阅读 0赞

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

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>
                                <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">
                    
                    <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<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();

[SouthEast]: /images/20220531/c219973754ef44369cfe5c486cccd4cc.png