jquery实现导航图轮播
版权声明：作者原创，转载请注明出处！
下面的几个栗子是使用jquery实现Banner轮播的效果，直接将代码贴出来，从最初级没有任何优化和封装的写法，一直到最后一个栗子，一步步进行了优化，加大程序的可复用性，减少代码冗余。
栗子①
HTML布局：注：图片请自己准备，大小为（W：200px H：200px）
//最外层容器DIV
<div id="wrap">
//图片容器UL
<ul id="imgWrap">
<li id="one"><img src="img/1.1.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
//按钮容器OL
<ol id="numWrap">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ol>
//左右按钮
<div id="left"></div>
<div id="right"></div>
</div>
CSS样式：注：一些较为特殊的样式已经进行说明，请仔细阅读每一个样式添加的意义
* {
margin:;
padding:;
outline:;
border:;
}
li {
list-style: none;
}
#wrap {
width: 200px;
height: 200px;
margin: 10px auto;
overflow: hidden; /*溢出部分隐藏*/
position: relative;
}
#imgWrap {
width: 200px; /*图片容器固定一张图片宽高，在JS里使用代码进行动态控制具体宽、高*/
height: 200px;
position: absolute;
top:;
left:;
transition: all .8s ease; /*设置动画*/
}
#imgWrap li {
float: left;
}
#numWrap {
position: absolute;
bottom: 10px;
right: 10px;
}
#numWrap li {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50px;
float: left;
margin: 5px;
}
#numWrap li.color { /*准备class样式*/
background: red;
}
#left,
#right {
width: 15px;
height: 20px;
background: #CCCCCC;
position: absolute;
top: 40%;
display: none;
}
#left {
left: 10px;
}
#right {
right: 10px;
}
#wrap:hover #left {
display: block;
}
#wrap:hover #right { /*鼠标移入显示左右按钮*/
display: block;
}
jquery和javascript代码：注：请在<head>标签中提前引入jquery文件
$(function() {
var index = 0;
//将图片的UL宽度撑大
$("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length);
$("#numWrap li").click(function() {
//循环清空
$("#numWrap li").removeClass("color");
//只给点击按钮添加class
$(this).addClass("color");
//点击按钮，显示对应图片
index = $(this).index();
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
});
$("#left").click(function() {
//下标--，才会等于-1
index--;
if(index == -1) {
index = $('#imgWrap li').length - 1;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
});
$("#right").click(function() {
//下标++，才会等于长度
index++;
if(index == $('#imgWrap li').length) {
index = 0;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
});
//开启定时器
var timer = setInterval(function() {
index++;
if(index == -1) {
index = $('#imgWrap li').length - 1;
} else if(index == $('#imgWrap li').length) {
index = 0;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
}, 2000);
//鼠标移入、移出关闭、开启定时器
$("#wrap").hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(function() {
index++;
if(index == -1) {
index = $('#imgWrap li').length - 1;
} else if(index == $('#imgWrap li').length) {
index = 0;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
}, 2000);
});
});
效果图：
栗子② 注：HTML、css布局及样式同栗子①
jquery及javascript代码
$(function() {
var index = 0;
//将图片的UL宽度撑大
$("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length);
//按钮点击
$("#numWrap li").click(function() {
index = $(this).index();
next();
});
$("#left").click(function() {
//下标--，才会等于-1
index--;
next();
});
$("#right").click(function() {
//下标++，才会等于长度
index++;
next();
});
//优化成函数，使用时可以再各处直接调用
function next() {
if(index == -1) {
index = $('#imgWrap li').length - 1;
} else if(index == $('#imgWrap li').length) {
index = 0;
};
//循环清空
$("#numWrap li").removeClass("color");
//只给点击按钮添加class
$("#numWrap li").eq(index).addClass("color");
//点击按钮，显示对应图片
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
};
//开启定时器
var timer = setInterval(function() {
index++;
next();
}, 2000);
//鼠标移入和移出事件清除、开启定时器
$("#wrap").hover(function() {
clearInterval(timer);
}, function() {
//不要写var，否则会开启两次定时器
timer = setInterval(function() {
index++;
next();
}, 2000);
});
});
栗子②主要是对栗子①进行了优化，将重复性代码，放到了next函数里，进行多次调用，程序得到大幅度代码的优化，提高了程序的可复用性。下面我们进行函数的封装，封装好的函数可以的到最大程度的可复用性，相同功能，只需调用相应函数，传入不同参数即可完成，不需要再重新编写相同功能的程序，怎么样，似不似很期待，^_^
栗子③
HTML代码：
<div class="wrap" id="wrap1">
<ul class="imgWrap" id="imgWrap1">
<li class="one"><img src="img/1.1.jpg" /></li>
<li><img src="img/1.2.jpg" /></li>
<li><img src="img/1.3.jpg" /></li>
<li><img src="img/1.4.jpg" /></li>
</ul>
<ol class="numWrap" id="numWrap1">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="left" id="left1"></div>
<div class="right" id="right1"></div>
</div> <div class="wrap" id="wrap2">
<ul class="imgWrap" id="imgWrap2">
<li class="one"><img src="img/1.1.jpg" /></li>
<li><img src="img/1.2.jpg" /></li>
<li><img src="img/1.3.jpg" /></li>
<li><img src="img/1.4.jpg" /></li>
</ul>
<ol class="numWrap" id="numWrap2">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="left" id="left2"></div>
<div class="right" id="right2"></div>
</div>
这个布局里写了两个要进行轮播的导航，目的是展示程序的可重复使用性
css代码：
* {
margin:;
padding:;
outline:;
border:;
}
li {
list-style: none;
}
.wrap {
width: 200px;
height: 200px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
.imgWrap {
width: 200px;
height: 200px;
position: absolute;
top:;
left:;
transition: all .8s ease;
}
.imgWrap li {
float: left;
}
.numWrap {
position: absolute;
bottom: 10px;
right: 10px;
}
.numWrap li {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50px;
float: left;
margin: 5px;
}
.numWrap li.color {
background: red;
}
.left,
.right {
width: 15px;
height: 20px;
background: #CCCCCC;
position: absolute;
top: 40%;
display: none;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.wrap:hover .left {
display: block;
}
.wrap:hover .right {
display: block;
}
jquery和javascript代码：
$(function() {
//调用
Tab($("#wrap1"),$("#imgWrap1"),$('#imgWrap1 li'),$("#numWrap1 li"),$("#left1"),$("#right1"));
Tab($("#wrap2"),$("#imgWrap2"),$('#imgWrap2 li'),$("#numWrap2 li"),$("#left2"),$("#right2"));
});
//封装成函数
//$("#wrap"),$("#imgWrap"),$('#imgWrap li'),$("#numWrap li"),$("#left"),$("#right")
function Tab(wrap,imgWrap,imgLi,numLi,left,right) {
var index = 0;
//将图片的UL宽度撑大
imgWrap.css('width', imgLi.width() * imgLi.length);
//按钮点击
numLi.click(function() {
index = $(this).index();
next();
});
left.click(function() {
//下标--，才会等于-1
index--;
next();
});
right.click(function() {
//下标++，才会等于长度
index++;
next();
});
//优化成函数，使用时可以再各处直接调用
function next() {
if(index == -1) {
index = imgLi.length - 1;
} else if(index == imgLi.length) {
index = 0;
};
//循环清空
numLi.removeClass("color");
//只给点击按钮添加class
numLi.eq(index).addClass("color");
//点击按钮，显示对应图片
imgWrap.css('left', -imgLi.width() * index);
};
//开启定时器
var timer = setInterval(function() {
index++;
next();
}, 2000);
//鼠标移入和移出事件清除、开启定时器
wrap.hover(function() {
clearInterval(timer);
}, function() {
//不要写var，否则会开启两次定时器
timer = setInterval(function() {
index++;
next();
}, 2000);
});
};
效果图：
到这里，就结束啦，具体有什么需要注意的地方，我都已经在代码的注释里写的很明确了，如果大家有更好的方法，欢迎与我交流，共同成长和进步！
入我有理解的不正确的地方，欢迎各位大神批评指正，谢谢
jquery实现导航图轮播的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- 自适应图片宽度的jQuery焦点幻灯轮播代码
自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示 XML/HTML Code <div id="sli ...
- jQuery补充，基于jQuery的bxslider轮播器插件
基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...
- （转）jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码 在线演示本地下载
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
随机推荐
- Android 圆形头像 自己动手
圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...
- 应用程序框架实战三十:表现层及ASP.NET MVC介绍（一）
本文将介绍表现层及ASP.NET MVC的一些要点,特别是ASP.NET MVC的一些抽象和封装技巧,如果你对MVC还不了解,可以参考<ASP.NET MVC4 高级编程>,作者Jon G ...
- 从零开始编写自己的C#框架（8）——后台管理系统功能设计
还是老规矩先吐下槽,在规范的开发过程中,这个时候应该是编写总体设计(概要设计)的时候,不过对于中小型项目来说,过于规范的遵守软件工程,编写太多文档也会拉长进度,一般会将它与详细设计合并到一起来处理,所 ...
- C#：lock锁与订单号（或交易号）的生成
在弄电商类网站的时候,往往是根据年月日时分秒的格式生成订单号(yyyyMMddHHmmss),为了解决并发性,就直接在生成订单号的区域块加上lock. 下面,我们来简单测试一下. 1.新建项目(控制台 ...
- Java内存模型深度解析：基础部分--转
原文地址:http://www.codeceo.com/article/java-memory-1.html 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何 ...
- ios 静态库冲突的解决办法
最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的时候被“坑”了,最后终于顺利的解决了.发现网上也有不少人遇到一样的问题,但是能找到的数量有限的解决办法写得都不详细,很难让人理 ...
- Java中的反射机制
Java反射机制 反射机制定义 反射机制是Java语言中一个非常重要的特性,它允许程序在运行时进行自我检查,同时也允许其对内部成员进行操作.由于反射机制能够实现在运行时对类进行装载,因此能够增加程序的 ...
- mybatis入门基础(八)-----查询缓存
一.什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 1.1. 一级缓存是sqlSession级别的缓存.在操作数据库时需要构造 ...
- Hibernate ——二级缓存
一.Hibernate 二级缓存 1.Hibernate 二级缓存是 SessionFactory 级别的缓存. 2.二级缓存分为两类: (1)Hibernate内置二级缓存 (2)外置缓存,可配置的 ...
- 用Vagrant创建Jenkins构建环境
这是一个关于Vagrant的学习系列,包含如下文章: Vagrant入门 创建自己的Vagrant box 用Vagrant搭建Jenkins构建环境 用Vagrant和Ansible搭建持续交付平台 ...