菜单联动与图片轮播-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46176142/article/details/107155968
项目收获
封装getElementById（），使用更方便。
Function (id){
Return typeof(id)===”string”?Document.getElementById(id):id;
}
getElementsByClassName IE8以下版本不支持
图片与圆点的联动通过index，和一个方法来实现
自定义属性
item[i].setAttribute(“data-index”,i);
dix=this.getAttribute(“data-index”);
步骤
1.封装getElementById()
2.实现定时器（用定时器使index变换，使图片浮现）
3.实现圆点点击（给id命为数字方法，但只能用一次id只能有一个）
4.实现><点击（给index自增或自减）
5.实现菜单浮现（用setAttribute，getAttribute），对className，dispaly,background运用
代码  分为html ，css ，js
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main" id="main">
            <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>
                            <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>
                        </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="ml10 mr10">/</span>
                                       <a href="">平板</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">一体机</a>
                                    </div>
                                    <div class="sub-row">
                                       <span class="bold mr10">电脑配件：</span>
                                       <a href="">显示器</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">CPU</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">主板</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">硬盘</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">电源</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">显卡</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">交换机</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">存储卡</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">U盘</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">移动硬盘</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">鼠标垫</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">中央</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">三门</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</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 class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">四件套</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">节能灯</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">装饰字画</a>
                                       <span class="ml10 mr10">/</span>
                                       <a href="">照片墙</a>
                                       <span class="ml10 mr10">/</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 class="ml10 mr10">/</span>
                                       <a href="">雨伞雨衣</a>
                                    </div>
                                </div>
                            </div>
            </div>
            <div class="menu-content" id="menu-content">
                <div class="menu-item">
                    <a href="#">
                        <span>手机 、配件</span>
                        <i class="iconfont">&#xe665;</i>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="#">
                        <span>电脑</span>
                        <i  class="iconfont">&#xe665;</i>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="#">
                        <span>家用电器</span>
                        <i  class="iconfont">&#xe665;</i>
                    </a>
                </div>
                <div class="menu-item">
                    <a href="#">
                        <span>家具</span>
                        <i  class="iconfont">&#xe665;</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="dot" id="dot">
                <span class="active"></span>
                <span></span>
                <span></span>
            </div>
        </div>
</body>
<script src="js/carousel.js"></script>
</html>
Css部分：
*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
@font-face {font-family: 'iconfont';
    src: url('../img/font/iconfont.eot');
    src: url('../img/font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../img/font/iconfont.woff') format('woff'),
    url('../img/font/iconfont.ttf') format('truetype'),
    url('../img/font/iconfont.svg#iconfont') format('svg');
}
body{
    font-family: "微软雅黑";
    color: #14191E;
}
.main{
    width: 1200px;
    height: 460px;
    margin: 40px auto;
    overflow: hidden;
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
    position: relative;
}
.banner .banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    display: none;
}
.banner .slide-active{
    display: block;
}
.banner  .slide1{
    background-image: url(../img/bg1.jpg);
}
.banner  .slide2{
    background-image: url(../img/bg2.jpg);
}
.banner  .slide3{
    background-image: url(../img/bg3.jpg);
}
.main .button{
    width: 40px;
    height: 80px;
    background-color: black;
    position: absolute;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background: url(../img/arrow.png) no-repeat center center;
}
.button:hover{
    background-color: #000000;
    opacity: 0.8;
    filter:alpha(opacity=80);
}
.main .prev{
    transform: rotate(180deg);
}
.main .next{
    left: auto;
    right: 0;
}
.main .dot{
    position: absolute;
    right: 10px;
    bottom: 24px;
    
}
.main .dot span{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(7,17,27,0.4);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
    display: inline-block;
    margin-left: 8px;
    cursor: pointer;
}
.main .dot .active{
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
    background: #FFFFFF;
}
.main .menu-box{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(7,17,27,0.5);
    opacity: 0.5;
    z-index: 1;
}
.main .menu-content{
    width: 244px;
    height: 454px;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 6px;
    z-index: 2;
    background: rgba(192,196,200,0.5);
}
.menu-item{
    height:64px;
    line-height: 66px;
    font-size: 16px;
    padding: 0 24px;
    position: relative;
}
.menu-item a:link,.menu-item a:visited{
    color: white;
}
.menu-item a{
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 0 8px;
    height: 63px;
}

.menu-item i{
    position: absolute;
    right: 32px;
    font-size: 24px;
    top: 2px;
    font-family:"iconfont";
    font-style: normal;
    font-weight: normal;
    color: rgba(255,255,255,0.5);
}
.sub-menu{
    width: 730px;
    height: 458px;
    border: 1px solid #d9dde1;
    background: white;
    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;
    display: none;  
}
.sub-inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;
}
.title{
    color: #f01414;
    font-size: 16px;
    margin: 28px 0 30px 0;
    font-weight: bold;
}
.sub-row{
    margin-top: 25px;
}
.sub-row .bold{
    font-weight: bold;
}
.sub-row .mr10{
    margin-right: 10px;
}
.sub-row .ml10{
    margin-left: 10px;
}
.hide{
    display: none;
}
Js部分：
//封装getElementById()
function ById(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}
main=ById(main);
banner=ById(banner);
pics=banner.getElementsByTagName("div");
dot=ById(dot).getElementsByTagName("span");
timer=null;
index=0;
len=pics.length;
menu=ById("menu-content");
item=menu.getElementsByClassName("menu-item");
sub=ById("sub-menu");
inner=sub.getElementsByClassName("inner-box");

function img(){
    //菜单显示
    for(j=0;j<item.length;j++){
        item[j].setAttribute("data-index",j);
        item[j].onmouseover=function(){
            dix=this.getAttribute("data-index");
            console.log(dix);
            sub.className="sub-menu";
            for(i=0;i<item.length;i++){
                item[i].style.background="none";
                inner[i].style.display="none";
            }
            this.style.background="rgba(0,0,0,0.1)";
            inner[dix].style.display="block";
        }
    }
    //菜单消失
    menu.onmouseout=function(){
        sub.className="sub-menu hide";
        for(i=0;i<item.length;i++){
            item[i].style.background="none";
        }
    }
    //移动到二级菜单时不会消失
    sub.onmouseover=function(){
        sub.className="sub-menu";
    }
    //鼠标不在二级菜单时消失
    sub.onmouseout=function(){
        sub.className="sub-menu hide";
    }

    //清除定时器
    main.onmouseover=function(){
        if(timer) clearInterval(timer);
    }

    //不在main范围时，自动轮播
    main.onmouseout=function(){
        timer=setInterval(function(){
            for(i=0;i<pics.length;i++){
                index++;
                if(index>=len) index=0;
                changeImg(index);
            }
            
        }, 2000);
    }
    main.onmouseout();

    //圆点点击
    for(i=0;i<len;i++){
        dot[i].id=i;
        dot[i].onclick=function(){
            index=this.id;
            changeImg(index);
        }
    }

    //点击<
    prev=ById(prev);
    prev.onclick=function(){
        index--;
        if(index<0) index=len-1;
        changeImg(index);
    }
    //点击>
    next=ById(next)
    next.onclick=function(){
        index++;
        if(index>=len) index=0;
        changeImg(index);
    }

    //鼠标移动菜单浮现

}
function changeImg(index){
    for(i=0;i<len;i++){
        pics[i].style.display='none';
        dot[i].className="";
    }
    pics[index].style.display='block';
    dot[index].className="active";
}
img();
用js实现图片轮播
