JS實現輪播圖特效（帶二級導航）

時間 2020-01-02

原文原文鏈接

按照國際慣例先放效果圖javascript

index.htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</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="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-content" id="menu-content">
            <div class="menu-item">
                <a href="">
                    <span>手機、配件</span>
                    <i class="icon">&#xe665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>電腦</span>
                    <i class="icon">&#xe665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>家用電器</span>
                    <i class="icon">&#xe665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>傢俱</span>
                    <i class="icon">&#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="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="js/script.js"></script>
</body>
</html>

style.csshtml

/*通用*/
    *{
        margin:0;
        padding:0;
    }
    @font-face{
        font-family: 'iconfont';
        src:url('../img/font/iconfont.eot');
        src: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{
        font-family: "微軟雅黑";
        color: #14191e;
    }
    .main{
        width:1200px;
        height:460px;
        margin:30px auto;
        position:relative;
        overflow:hidden;
    }
/*banner*/
    .banner-slide{
        width:1200px;
        height:460px;
        float: left;
        display: none;
    }
    .slide-active{
        display: block;
    }
    .slide1{
        background-image:url(../img/bg1.jpg);
    }
    .slide2{
        background-image:url(../img/bg2.jpg);
    }
    .slide3{
        background-image:url(../img/bg3.jpg);
    }
    .btn{
        position: absolute;
        transform:rotate(180deg);
        top: 50%;
        left: 244px;
        height: 80px;
        width: 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{
        transform:rotate(0deg);
        left:auto;
        right:0;
    }
    .dots{
        position: absolute;
        bottom: 24px;
        right: 0;
        text-align: right;
        padding-right: 24px;
        line-height: 12px;    
    }
    .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:460px;
        z-index:1;
        background-color: rgba(7, 17, 27, 0.5);
    }
    .menu-content{
        position: absolute;
        top:0;
        left:0;
        width:244px;
        z-index:2;
    }
    .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;
        top:0px;
        font-style:normal;
        font-family:"iconfont";
        font-size:24px;
    }
/*menu子菜單*/
    .sub-menu{
        position: absolute;
        left:244px;
        top:0;
        z-index:500;
        width: 730px;
        height: 458px;
        background-color: #fff;
        border:1px solid #d9dde1;
        box-shadow: 0 4px 7px rgba(0,0,0,.1) inset;
    }
    .inner-box{
        width:100%;
        height:100%;
        background:url(../img/fe.png) no-repeat;
        display: none;
    }
    .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;
    }

script.jsjava

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'),
    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();
        },1000);    
    }

// 中止自動輪播的函數
    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';
    });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。