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:;
padding:;
}
@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:;
}
.dots{
position: absolute;
bottom: 24px;
right:;
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:;
left:;
width:244px;
height:460px;
z-index:;
background-color: rgba(7, 17, 27, 0.5);
}
.menu-content{
position: absolute;
top:;
left:;
width:244px;
z-index:;
}
.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:;
}
.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:;
z-index:;
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实现轮播图特效（带二级导航）的更多相关文章
- 2、原生js实现轮播图特效
很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...
- 纯JS实现轮播图特效——详解
<div id="slider"> <div id="sliderImgs"> <img src="img/mi04.j ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js编写轮播图，广告弹框
1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...
- js实现轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
随机推荐
- Codeforces_540_C
http://codeforces.com/problemset/problem/540/C 简单bfs,注意结束条件. #include<iostream> #include<cs ...
- 第一节——词向量与ELmo(转）
最近在家听贪心学院的NLP直播课.都是比较基础的内容.放到博客上作为NLP 课程的简单的梳理. 本节课程主要讲解的是词向量和Elmo.核心是Elmo,词向量是基础知识点. Elmo 是2018年提出的 ...
- 曹工说Spring Boot源码（17）-- Spring从xml文件里到底得到了什么（aop：config完整解析【中】）
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...
- python之sorted用法
operator.itemgetter函数 operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),下面看例子. a = [1, ...
- k8s系列---EFK日志系统
文章拷于:http://blog.itpub.net/28916011/viewspace-2216748/ 用于自己备份记录错误 一个完整的k8s集群,应该包含如下六大部分:kube-dns.i ...
- ODBC连接数据库实例
2012-12-13 22:27 (分类:默认分类) 1.首先建立数据源,正常情况下载控制面板-管理工具-数据源,打开后有用户DSN系统DSN 两者区别在于系统级的DSN,就是对该系统的所有登录用户可 ...
- Ts环境搭建
一．ts环境搭建 安装node.js,用dos命令npm全局安装typescripe包环境 进入vscode官网下载zip文件解压后使用code.exe
- 在debian10启动器中添加自定义应用
首先要添加一个desktop类型的文件,搜索一下即可 若将desktop文件放在/usr/share/applicatios/中,需要执行update-desktop-database使新添加的应用生 ...
- JavaScript——基础知识，开始我们的js编程之旅吧！
JavaScript基础第01天 1. 编程语言 编程语言: 可以通过类似于人类语言的"语言"来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言(Programming ...
- Webpack实战（七）：简单搞懂PostCSS的用法及与一些插件的用法
不知不觉地春节要来临了,今天已经是放假的第二天,想想回老家之后所有的时间就不是自己的了,要陪孩子玩,走亲戚等等,我还是趁着在郑州的这两天,把几天后春节要发布的文章给提前整整.在此,提前祝大家春节快乐! ...