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

按照国际惯例先放效果图

index.html

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>demo</title><linkrel="stylesheet"href="css/style.css">
</head>
<body><divclass="main"id="main"><divclass="menu-box"></div><!--子导航--><divclass="sub-menu hide"id="sub-menu"><divclass="inner-box"><divclass="sub-inner-box"><divclass="title">手机、配件</div><divclass="sub-row"><spanclass="bold mr10">手机通讯：</span><ahref="">手机</a><spanclass="ml10 mr10">/</span><ahref="">手机维修</a><spanclass="ml10 mr10">/</span><ahref="">以旧换新</a></div><divclass="sub-row"><spanclass="bold mr10">手机配件：</span><ahref="">手机壳</a><spanclass="ml10 mr10">/</span><ahref="">手机存储卡</a><spanclass="ml10 mr10">/</span><ahref="">数据线</a><spanclass="ml10 mr10">/</span><ahref="">充电器</a><spanclass="ml10 mr10">/</span><ahref="">电池</a></div><divclass="sub-row"><spanclass="bold mr10">运营商：</span><ahref="">中国联通</a><spanclass="ml10 mr10">/</span><ahref="">中国移动</a><spanclass="ml10 mr10">/</span><ahref="">中国电信</a></div><divclass="sub-row"><spanclass="bold mr10">智能设备：</span><ahref="">智能手环</a><spanclass="ml10 mr10">/</span><ahref="">智能家居</a><spanclass="ml10 mr10">/</span><ahref="">智能手表</a><spanclass="ml10 mr10">/</span><ahref="">其他配件</a></div><divclass="sub-row"><spanclass="bold mr10">娱乐：</span><ahref="">耳机</a><spanclass="ml10 mr10">/</span><ahref="">音响</a><spanclass="ml10 mr10">/</span><ahref="">收音机</a><spanclass="ml10 mr10">/</span><ahref="">麦克风</a></div></div></div><divclass="inner-box"><divclass="sub-inner-box"><divclass="title">电脑</div><divclass="sub-row"><spanclass="bold mr10">电脑：</span><ahref="">笔记本</a><spanclass="ml10 mr10">/</span><ahref="">平板</a><spanclass="ml10 mr10">/</span><ahref="">一体机</a></div><divclass="sub-row"><spanclass="bold mr10">电脑配件：</span><ahref="">显示器</a><spanclass="ml10 mr10">/</span><ahref="">CPU</a><spanclass="ml10 mr10">/</span><ahref="">主板</a><spanclass="ml10 mr10">/</span><ahref="">硬盘</a><spanclass="ml10 mr10">/</span><ahref="">电源</a><spanclass="ml10 mr10">/</span><ahref="">显卡</a><spanclass="ml10 mr10">/</span><ahref="">其他配件</a></div><divclass="sub-row"><spanclass="bold mr10">游戏设备：</span><ahref="">游戏机</a><spanclass="ml10 mr10">/</span><ahref="">耳机</a><spanclass="ml10 mr10">/</span><ahref="">游戏软件</a></div><divclass="sub-row"><spanclass="bold mr10">网络产品：</span><ahref="">路由器</a><spanclass="ml10 mr10">/</span><ahref="">网络机顶盒</a><spanclass="ml10 mr10">/</span><ahref="">交换机</a><spanclass="ml10 mr10">/</span><ahref="">存储卡</a><spanclass="ml10 mr10">/</span><ahref="">网卡</a></div><divclass="sub-row"><spanclass="bold mr10">外部产品：</span><ahref="">鼠标</a><spanclass="ml10 mr10">/</span><ahref="">键盘</a><spanclass="ml10 mr10">/</span><ahref="">U盘</a><spanclass="ml10 mr10">/</span><ahref="">移动硬盘</a><spanclass="ml10 mr10">/</span><ahref="">鼠标垫</a><spanclass="ml10 mr10">/</span><ahref="">电脑清洁</a></div></div></div><divclass="inner-box"><divclass="sub-inner-box"><divclass="title">家用电器</div><divclass="sub-row"><spanclass="bold mr10">电视：</span><ahref="">国产品牌</a><spanclass="ml10 mr10">/</span><ahref="">韩国品牌</a><spanclass="ml10 mr10">/</span><ahref="">欧美品牌</a></div><divclass="sub-row"><spanclass="bold mr10">空调：</span><ahref="">显示器</a><spanclass="ml10 mr10">/</span><ahref="">柜式</a><spanclass="ml10 mr10">/</span><ahref="">中央</a><spanclass="ml10 mr10">/</span><ahref="">壁挂式</a></div><divclass="sub-row"><spanclass="bold mr10">冰箱：</span><ahref="">多门</a><spanclass="ml10 mr10">/</span><ahref="">对开门</a><spanclass="ml10 mr10">/</span><ahref="">三门</a><spanclass="ml10 mr10">/</span><ahref="">双门</a></div><divclass="sub-row"><spanclass="bold mr10">洗衣机：</span><ahref="">滚筒式洗衣机</a><spanclass="ml10 mr10">/</span><ahref="">迷你洗衣机</a><spanclass="ml10 mr10">/</span><ahref="">洗烘一体机</a></div><divclass="sub-row"><spanclass="bold mr10">厨房电器：</span><ahref="">油烟机</a><spanclass="ml10 mr10">/</span><ahref="">洗碗机</a><spanclass="ml10 mr10">/</span><ahref="">燃气灶</a></div></div></div><divclass="inner-box"><divclass="sub-inner-box"><divclass="title">家具</div><divclass="sub-row"><spanclass="bold mr10">家纺：</span><ahref="">被子</a><spanclass="ml10 mr10">/</span><ahref="">枕头</a><spanclass="ml10 mr10">/</span><ahref="">四件套</a><spanclass="ml10 mr10">/</span><ahref="">床垫</a></div><divclass="sub-row"><spanclass="bold mr10">灯具：</span><ahref="">台灯</a><spanclass="ml10 mr10">/</span><ahref="">顶灯</a><spanclass="ml10 mr10">/</span><ahref="">节能灯</a><spanclass="ml10 mr10">/</span><ahref="">应急灯</a></div><divclass="sub-row"><spanclass="bold mr10">厨具：</span><ahref="">烹饪锅具</a><spanclass="ml10 mr10">/</span><ahref="">餐具</a><spanclass="ml10 mr10">/</span><ahref="">菜板刀具</a></div><divclass="sub-row"><spanclass="bold mr10">家装：</span><ahref="">地毯</a><spanclass="ml10 mr10">/</span><ahref="">沙发垫套</a><spanclass="ml10 mr10">/</span><ahref="">装饰字画</a><spanclass="ml10 mr10">/</span><ahref="">照片墙</a><spanclass="ml10 mr10">/</span><ahref="">窗帘</a></div><divclass="sub-row"><spanclass="bold mr10">生活日用：</span><ahref="">收纳用品</a><spanclass="ml10 mr10">/</span><ahref="">浴室用品</a><spanclass="ml10 mr10">/</span><ahref="">雨伞雨衣</a></div></div></div></div><!--主导航--><divclass="menu-content"id="menu-content"><divclass="menu-item"><ahref=""><span>手机、配件</span><iclass="icon">&#xe665;</i></a></div><divclass="menu-item"><ahref=""><span>电脑</span><iclass="icon">&#xe665;</i></a></div><divclass="menu-item"><ahref=""><span>家用电器</span><iclass="icon">&#xe665;</i></a></div><divclass="menu-item"><ahref=""><span>家具</span><iclass="icon">&#xe665;</i></a></div></div><!--轮播图--><divclass="banner"id="banner"><ahref=""><divclass="banner-slide slide1 slide-active"></div></a><ahref=""><divclass="banner-slide slide2"></div></a><ahref=""><divclass="banner-slide slide3"></div></a></div><ahref="javascript:void(0)"class="btn prev"id="prev"></a><ahref="javascript:void(0)"class="btn next"id="next"></a><divclass="dots"id="dots"><spanclass="active"></span><span></span><span></span></div></div><scriptsrc="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;functionbyId(id){return typeof(id)==='string'?document.getElementById(id):id;
}//兼容IE的事件绑定函数functionaddHandler(elem,type,fn){if(elem.addEventListener){elem.addEventListener(type,fn);}else if(elem.attachEvent){elem.attachEvent(type,fn);}else{elem['on'+type]=fn;}}//切换图片的函数functionchangeImg(){for(var i=0;i<size;i++){pics[i].style.display='none';dots[i].className='';}pics[index].style.display='block';dots[index].className='active';}//自动轮播函数functionautoPlay(){timer=setInterval(function(){index++;if(index>=size) index=0;changeImg();},1000);    }//停止自动轮播的函数functionstopPlay(){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++){//保存当前索引，否则索引始终会是3dots[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实现轮播图特效（带二级导航）相关推荐

电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js
介绍 Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars. Github htt ...
html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法在页面中引入style.css和index ...
HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
一个不错的旋转木马轮播图特效
旋转木马轮播图特效共有五张图片,每张图片排列的位置是以中间为对称的.实现了想要的轮播效果,可用在网页制作中重要的展示. 效果如下: 主要代码如下: <!doctype html> < ...
原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...

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

JS实现轮播图特效（带二级导航）相关推荐

最新文章

热门文章