原生JS制作自动+手动轮播图，附带二级分类菜单

最新推荐文章于 2023-01-06 14:51:08 发布

Show_Yeah

最新推荐文章于 2023-01-06 14:51:08 发布

阅读量640

点赞数

分类专栏： JS 文章标签： JS轮播原生Javascript轮播自动+手动轮播图轮播图+菜单

本文链接：https://blog.csdn.net/qq_32183965/article/details/102819291

版权

原生JS制作自动+手动轮播图，附带二级分类菜单

包含以下功能：

1、鼠标移开自动轮播

2、鼠标移入停止自动轮播

3、点击左右按钮可手动切换图片

4、点击索引小圆点可手动切换图片

5、鼠标移入一级菜单展开二级菜单

演示图

HMTL部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
</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="ml10 mr10">/</span>
                    <a href="">手机维修</a>
                    <span>/</span>
                    <a href="">以旧换新</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">手机配件：</span>
                    <a href="">手机壳</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">手机存储卡</a>
                    <span>/</span>
                    <a href="">数据线</a>
                    <span>/</span>
                    <a href="">充电器</a>
                    <span>/</span>
                    <a href="">电池</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">运营商：</span>
                    <a href="">中国联通</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">中国移动</a>
                    <span>/</span>
                    <a href="">中国电信</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">智能设备：</span>
                    <a href="">智能手环</a>
                    <span class="ml10 mr10">/</span>
                    <a href="">智能家居</a>
                    <span>/</span>
                    <a href="">智能手表</a>
                    <span>/</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="ml10 mr10">/</span>
                    <a href="">平板</a>
                    <span>/</span>
                    <a href="">一体机</a>
                </div>
                <div class="sub-row">
                    <span class="bold mr10">电脑配件：</span>
                    <a href=""

最低0.47元/天解锁文章

Show_Yeah

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生JS制作自动+手动轮播图，附带二级分类菜单

原生JS制作自动+手动轮播图，附带二级分类菜单包含以下功能：1、鼠标移开自动轮播2、鼠标移入停止自动轮播3、点击左右按钮可手动切换图片4、点击索引小圆点可手动切换图片5、鼠标移入一级菜单展开二级菜单演示图HMTL部分<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫