JS实现轮播图特效带二级导航

按照国际惯例先放效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>demo</link rel="stylesheet" href="css/style.css"bodydiv class="main" id="main">
        ="menu-box"></div<!-- 子导航 -->
        ="sub-menu hide"="sub-menu">
            ="inner-box">
                ="sub-inner-box">
                    ="title">手机、配件="sub-row">
                        span ="bold mr10">手机通讯：spana href="">手机a="ml10 mr10">/>手机维修>以旧换新>手机配件：>手机壳>手机存储卡>数据线>充电器>电池>运营商：>中国联通>中国移动>中国电信>智能设备：>智能手环>智能家居>智能手表>其他配件>娱乐：>耳机>音响>收音机>麦克风>电脑>
                       >电脑：>笔记本>平板>一体机>电脑配件：>显示器>CPU>主板>硬盘>电源>显卡>游戏设备：>游戏机>游戏软件>网络产品：>路由器>网络机顶盒>交换机>存储卡>网卡>外部产品：>鼠标>键盘>U盘>移动硬盘>鼠标垫>电脑清洁>家用电器>电视：>国产品牌>韩国品牌>欧美品牌>空调：>柜式>中央>壁挂式>冰箱：>多门>对开门>三门>双门>洗衣机：>滚筒式洗衣机>迷你洗衣机>洗烘一体机>厨房电器：>油烟机>洗碗机>燃气灶>家具>家纺：>被子>枕头>四件套>床垫>灯具：>台灯>顶灯>节能灯>应急灯>厨具：>烹饪锅具>餐具>菜板刀具>家装：>地毯>沙发垫套>装饰字画>照片墙>窗帘>生活日用：>收纳用品>浴室用品>雨伞雨衣 主导航 ="menu-content"="menu-content"="menu-item"i ="icon">&#xe665;i 轮播图 ="banner"="banner"="banner-slide slide1 slide-active"="banner-slide slide2"="banner-slide slide3"="javascript:void(0)" class="btn prev"="prev"="btn next"="next"="dots"="dots"="active"script src="js/script.js"scripthtml>

style.css

/*通用*/
    *{
        margin:0;
        padding:0;
    }
    @font-face{
        font-family: 'iconfont';
        src:url('../img/font/iconfont.eot');url('../img/font/iconfont.eot') format('embeded-opentype'),url('../img/font/iconfont.woff') format('woff'),url('../img/font/iconfont.ttf') format('truetype'),url('../img/font/iconfont.svg#iconfont') format('svg');
    }
    a{
        text-decoration:none;
    }
    a:link,a:visited{
        color:#5e5e5e;
    }
    body{ "微软雅黑"; #14191e;
    }
    .main{
        width:1200px;
        height:460px;30px auto;
        position:relative;
        overflow:hidden;
    }
banner
    .banner-slide{
        float: left;
        display: none;
    }
    .slide-active{ block;
    }
    .slide1{
        background-image:url(../img/bg1.jpg);
    }
    .slide2{url(../img/bg2.jpg);
    }
    .slide3{url(../img/bg3.jpg);
    }
    .btn{ absolute;
        transform:rotate(180deg);
        top: 50%;
        left: 244px; 80px; 40px;
        margin-top:-40px;
        background:url(../img/arrow.png) center center no-repeat;
    }
    .btn:hover{
        background-color:#333;
        opacity: 0.8;
        filter:alpha(opacity=80);
    }
    .next{rotate(0deg);auto;
        right:
    .dots{
        bottom: 24px; 0;
        text-align: right;
        padding-right:
        line-height: 12px;    
    }
    .dots span{ inline-block; 12px;
        border-radius:
        margin-left: 8px; rgba(7,17,27,0.4);
        cursor: pointer;
        box-shadow: 0 0 0 2px rgba(255,0.8) inset;
    }
    .dots span.active{ 0 0 0 2px rgba(7,0.4) inset; #ffffff;
    }
menu主菜单
    .menu-box{244px;
        z-index:1;
    .menu-content{2;
    }
    .menu-item{64px;66px;0 24px;
    }
    .menu-item a{ block;63px; relative;rgb(255,255);0 8px;
        border-bottom:1px solid rgba(255,.2);
    }
    .menu-item:last-child a{
    .menu-item i{24px;0px;
        font-style:normal;"iconfont";
        font-size:24px;
    }
menu子菜单
    .sub-menu{500; 730px; 458px; #fff;
        border:1px solid #d9dde1; 0 4px 7px rgba(0,.1) inset;
    }
    .inner-box{100%;url(../img/fe.png) no-repeat;
    .sub-inner-box{ 652px; 40px;
    }
    .title{ #f01414; 16px; 28px;
        font-weight: bold;
        margin-bottom: 30px;
    }
    .sub-row{25px;
    }
    .bold{bold;
    }
    .mr10{
        margin-right:10px;
    }
    .ml10{
    .hide{ none;
    }

script.js

var index=0,//当前轮播图索引
    timer=null,prev=byId('prev'),next=byId('next'=byId('dots').getElementsByTagName('span'=menuContent.getElementsByClassName('menu-item'=subMenu.getElementsByClassName('inner-box'=byId('banner'pics.length;

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

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

 切换图片的函数
     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';
    }

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

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

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

 点击下一个按钮
    addHandler(next,1)">(){
        index++点击圆点
    var j=0;j<dots.length;j++){
         保存当前索引，否则索引始终会是3
        dots[j].setAttribute('data-id'(){
            index=this.getAttribute('data-id');
            changeImg();
        })
    }

鼠标移入main停止轮播
addHandler(main,'mouseover'鼠标移出main继续轮播
addHandler(main,'mouseout'默认自动轮播
autoPlay();

鼠标移入出现二级导航
    var m=0;m<menuItems.length;m++){
        menuItems[m].setAttribute('data-index'(){
            subMenu.className='sub-menu'var idx=this.getAttribute('data-index');
            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.1)";
        });
    }

 鼠标移出banner隐藏二级导航
    addHandler(banner,'mouseout',1)">(){
        subMenu.className='sub-menu hide';
    });

 鼠标移出主菜单隐藏二级导航
    addHandler(menuContent,1)"> 鼠标移出子菜单隐藏二级导航
    addHandler(subMenu,1)">(){
        this.className='sub-menu hide'鼠标移入子菜单，显示二级导航
    addHandler(subMenu,'mouseover',1)">this.className='sub-menu';
    });

JS实现轮播图特效带二级导航

相关文章