1. 技术文章
  2. JS轮播特效+导航二级菜单

JS轮播特效+导航二级菜单

由 旧城冷巷雨未停 提交于 2020-03-22 12:37:47 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="1.css">
    <link rel="stylesheet" href="fonts/iconfont.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="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 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>
             </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-box">
        <div class="menu-content" id="menu-content">

            <div class="menu-item">
                <a href="">
                    <span>手机、配件</span>
                    <i class="iconfont icon-jiantouarrow487"></i>
                </a>
            </div>

            <div class="menu-item">
                <a href="">
                    <span>电脑</span>
                    <i class="icon-jiantouarrow487"></i>
                </a>
            </div>

            <div class="menu-item">
                <a href="">
                    <span>家用电器</span>
                    <i class="icon-jiantouarrow487"></i>
                </a>
            </div>

            <div class="menu-item">
                <a href="">
                    <span>家具</span>
                    <i class="icon-jiantouarrow487"></i>
                </a>
            </div>

        </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="btn prev" id="prev"></a>
        <a href="javascript:void(0)" class="btn next" id="next"></a>

        <div class="dots" id="dots">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src="1.js"></script>
</body>
</html>
var index=0,//当前轮播图索引
    timer=null,
    prev=byId('prev'),
    next=byId('next'),
    pics=byId('banner').getElementsByTagName('div'),//幻灯片
    dots=byId('dots').getElementsByTagName('span'),//点
    menuContent=byId('menu-content'),//主页面
    menuItems=menuContent.getElementsByClassName('menu-item'),//主页面导航
    subMenu=byId('sub-menu'),//子页面
    innerBoxs=subMenu.getElementsByClassName('inner-box'),
    main=byId('main'),  //最外层div
    banner=byId('banner'), //轮播图
    size=pics.length; //幻灯片个数

function byId(id){
    return typeof(id)==='string'?document.getElementById(id):id;
}

// 兼容IE的事件绑定函数
    function addHandler(elem,type,fn){
        if(elem.addEventListener){
            elem.addEventListener(type,fn);
        }else if(elem.attachEvent){
            elem.attachEvent(type,fn);
        }else{
            elem['on'+type]=fn;
        }
    }

// 切换图片的函数
    function changeImg(){
        for(var i=0;i<size;i++){
            pics[i].style.display='none';
            dots[i].className='';
        }
        pics[index].style.display='block';
        dots[index].className='active';
    }

// 自动轮播函数
    function autoPlay(){
        timer=setInterval(function(){
            index++;
            if(index>=size) index=0;
            changeImg();
        },2000);    
    }

// 停止自动轮播的函数
    function stopPlay(){
        if(timer){
            clearInterval(timer);
        }
    }

// 点击上一个按钮
    addHandler(prev,'click',function(){
        index--;
        if(index<0) index=size-1;
        changeImg();
    })

// 点击下一个按钮
    addHandler(next,'click',function(){
        index++;
        if(index>=size) index=0;
        changeImg();
    })

//点击圆点
    for(var j=0;j<dots.length;j++){
        // 保存当前索引，否则索引始终会是3
        dots[j].setAttribute('data-id',j);
        addHandler(dots[j],'click',function(){
            index=this.getAttribute('data-id');
            changeImg();
        })
    }

//鼠标移入main停止轮播
addHandler(main,'mouseover',stopPlay);

//鼠标移出main继续轮播
addHandler(main,'mouseout',autoPlay);

//默认自动轮播
autoPlay();

//鼠标移入出现二级导航
    for(var m=0;m<menuItems.length;m++){
        menuItems[m].setAttribute('data-index',m);
        addHandler(menuItems[m],'mouseover',function(){
            subMenu.className='sub-menu';
            var idx=this.getAttribute('data-index');
            for(var d=0;d<innerBoxs.length;d++){
                innerBoxs[d].style.display='none';
                menuItems[d].style.background = "none";
            }
            innerBoxs[idx].style.display='block';
            menuItems[idx].style.background = "rgba(0,0,0,0.1)";
        });
    }

// 鼠标移出banner隐藏二级导航
/*    addHandler(banner,'mouseout',function(){
        subMenu.className='sub-menu hide';
    });
*/
// 鼠标移出主菜单隐藏二级导航
    addHandler(menuContent,'mouseout',function(){
        subMenu.className='sub-menu hide';
    });

// 鼠标移出子菜单隐藏二级导航
    addHandler(subMenu,'mouseout',function(){
        this.className='sub-menu hide';
    });

//鼠标移入子菜单，显示二级导航
    addHandler(subMenu,'mouseover',function(){
        this.className='sub-menu';
    });
/*通用*/
*{
    margin:0;
    padding:0;
}
@font-face{
    font-family: 'iconfont';
    src:url('fonts/iconfont.eot');
    src:url('fonts/iconfont.eot') format('embeded-opentype'),
    url('fonts/iconfont.woff') format('woff'),
    url('fonts/iconfont.ttf') format('truetype'),
    url('fonts/iconfont.svg#iconfont') format('svg');
}
a{
    text-decoration:none;
}
a:link,a:visited{
    color:#5e5e5e;
}
body{
    font-family: "微软雅黑";
    color: #14191e;
}
.main{
    width:1200px;
    height:400px;
    margin:30px auto;
    position:relative;
    overflow:hidden;
}
/*banner*/
.banner-slide{
    width:1200px;
    height:400px;
    float: left;
    display: none;
}
.slide-active{
    display: block;
}
.slide1{
    background-image:url(img/4.jpg);
}
.slide2{
    background-image:url(img/3.jpg);
}
.slide3{
    background-image:url(img/1.jpg);
}
.btn{
    position: absolute;
    transform:rotate(180deg);
    top: 50%;
    left: 244px;
    height: 80px;
    width: 40px;
    margin-top:-40px;
    background:url(img/a.png) center center no-repeat;
}
.btn:hover{
    background-color:#333;
    opacity: 0.8;
    filter:alpha(opacity=80);
}
.next{
    transform:rotate(0deg);
    left:auto;
    right:0;
}
.dots{
    position: absolute;
    bottom: 24px;
    right: 0;
    padding-right: 24px;
}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
    background-color: rgba(7, 17, 27, 0.4);
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}
.dots span.active{
    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
    background-color: #ffffff;
}
/*menu主菜单*/
.menu-box{
    position: absolute;
    top:0;
    left:0;
    width:244px;
    height:400px;
    background-color: rgba(7, 17, 27, 0.5);
}

.menu-item{
    height:64px;
    line-height:66px;
    padding:0 24px;
}
.menu-item a{
    display: block;
    height:63px;
    position: relative;
    color:rgb(255,255,255);
    padding:0 8px;
    border-bottom:1px solid rgba(255,255,255,.2);
}
.menu-item:last-child a{
    border-bottom:0;
}
.menu-item i{
    position: absolute;
    right:24px;
    font-style:normal;
    font-family:"iconfont";
    font-size:24px;
}
/*menu子菜单*/
.sub-menu{
    position: absolute;
    left:244px;
    top:0;
    z-index:500;
    width: 730px;
    height: 300px;
    background-color: #fff;
    border:1px solid #d9dde1;
    box-shadow: 0 4px 7px rgba(0,0,0,.1) inset;
}

.sub-inner-box{
    width: 652px;
    margin-left: 40px;
}
.title{
    color: #f01414;
    font-size: 16px;
    line-height: 16px;
    margin-top: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}
.sub-row{
    margin-bottom:25px;
}
.bold{
    font-weight:bold;
}
.mr10{
    margin-right:10px;
}
.ml10{
    margin-left:10px;
}
.hide{
    display: none;
}

 

标签
轮播
广告条
margin
js
sub
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!