JS实现轮播图特效（带二级导航）
Posted chenyingying0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现轮播图特效（带二级导航）相关的知识，希望对你有一定的参考价值。
按照国际惯例先放效果图
index.html
<!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"></i> </a> </div> <div class="menu-item"> <a href=""> <span>电脑</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家用电器</span> <i class="icon"></i> </a> </div> <div class="menu-item"> <a href=""> <span>家具</span> <i class="icon"></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.css
/*通用*/ *{ 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.js
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‘; });
以上是关于JS实现轮播图特效（带二级导航）的主要内容，如果未能解决你的问题，请参考以下文章