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

最新推荐文章于 2024-07-16 16:43:05 发布

WindFromFarEast

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量1.9w

点赞数 48

分类专栏：前端

本文链接：https://blog.csdn.net/xwx617/article/details/79261031

版权

学习了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