jquery实现简单轮播
先上简单的html代码
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/init2.css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/test2.js"></script>
</head>
<body>
<div id="layout">
<header class="clearfix">
<div id="banner">
<ul id="banner_img">
<li class="active"><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
</ul>
</div>
</header>
</div>
</body>
</html>
在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。
html代码很简单，不做过多解释。
init2.css
*{
margin: 0px ;
padding: 0px ;
}
#layout{
width: 960px ;
margin: 0 auto ;
}
#banner{
position: relative;
overflow: hidden;
width: auto;
height: 200px;
border-radius: 10px ;
border: 2px solid black;
}
#banner_img li{
float: left;
list-style-type: none;
position: absolute;
left: -100% ;
}
#index{
position: absolute;
right: 8px ;
bottom: 8px ;
}
#index li{
float: left;
width: 16px ;
height: 16px ;
text-align: center;
line-height: 16px ;
border-radius: 5px ;
border:1px solid #FF7300 ;
background: white;
list-style: none;
margin-left: 8px ;
cursor: pointer;
}
.clearfix:after{
content: "" ;
height: 0px ;
display: block;
clear:both ;
}
.on
{
background:#FF7300 ;
}
css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，主要思路是把图片设置成绝对布局之后全部移动到父元素的一侧，然后再通过jquery动画来改变图片的位置，从而达到轮播的效果。
看一下对于鼠标悬停在图片区域的处理（参考别人的）：
$("#banner").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
//alert(index) ;
showImgs(index);
index++;
if(index==len){
index=0;
}
},2000)
}).trigger('mouseleave');
hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。
再来看看jquery动画的实现：
function showImgs(index)
{
$(".active").animate({"left": "-100%"},1000);
$(".active").removeClass('active') ;
$("#banner_img li").eq(index).css('left', '100%');
$("#banner_img li").eq(index).animate({"left": "0%"},1000);
$("#index li").removeClass('on').eq(index).addClass('on') ;
$("#banner_img li").eq(index).addClass('active') ;
}
这里的主要思路就是把有class=active的图片，也就是正在显示的图片进行左移，并去掉active类，同时把传进来index的所对应的图片放在父元素右边，然后也左移，这样就造成了一个接一个从右往左移的假象。然后把从右边移过来的图片添加上active类。
我们还需要一个方法来添加图片索引：
function addIndex(n)
{
var ul = $("<ul id=\"index\"></ul>") ;
for(var i=1;i<=n;i++)
{
var li = $("<li></li>") ;
li.append(function(num){
return num
}(i)) ;
ul.append(li) ;
}
ul.children().first().addClass('on') ;
$("#banner").append(ul);
}
基本上就是这样，需要注意图片的宽度要和父元素一样，不然会有无法连续衔接或者部分溢出的问题。
全部js：
init();
function init()
{
$(function(){
var index = 1 ;
var adTime ;
var len = $("#banner_img li").length ;
addIndex(len) ;
$(".active").css('left', '0%');
var bannerLi = $("#index li");
//handle index
$("#index li").mouseover(function() {
index = $("#index li").index(this) ;
jumpImgs(index) ;
index++ ;
if(index==len)
{
index = 0 ;
}
});
//toggleInterval
$("#banner").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
//alert(index) ;
showImgs(index);
index++;
if(index==len){
index=0;
}
},2000)
}).trigger('mouseleave');
});
}
//auto add index
function addIndex(n)
{
var ul = $("<ul id=\"index\"></ul>") ;
for(var i=1;i<=n;i++)
{
var li = $("<li></li>") ;
li.append(function(num){
return num
}(i)) ;
ul.append(li) ;
}
ul.children().first().addClass('on') ;
$("#banner").append(ul);
}
function jumpImgs(index)
{
$(".active").css('left', '-100%');
$(".active").removeClass('active') ;
$("#banner_img li").eq(index).css('left', '0%');
$("#banner_img li").eq(index).addClass('active') ;
}
function showImgs(index)
{
$(".active").animate({"left": "-100%"},1000);
$(".active").removeClass('active') ;
$("#banner_img li").eq(index).css('left', '100%');
$("#banner_img li").eq(index).animate({"left": "0%"},1000);
$("#index li").removeClass('on').eq(index).addClass('on') ;
$("#banner_img li").eq(index).addClass('active') ;
}
jquery实现简单轮播的更多相关文章
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jquery实现导航图轮播
版权声明:作者原创,转载请注明出处! 下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可 ...
- 自适应图片宽度的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五屏轮播手风琴切换代码 在线演示本地下载
- JS---案例：简单轮播图
案例:简单轮播图 div叫盒子,里面包了2个小盒子,一个是inner,一个是square inner的div是放ul,里面有li,a,和图片 square的div里面放span,是轮播图的小点 < ...
随机推荐
- 配置ip，使你的虚拟机可以被别人访问到，搭建服务器必备
我么一般配置虚拟机的时候,我们总是喜欢使用虚拟网段,但是这样别人有可能ping不通我的虚拟机的. 若是我们想要别人ping我们的ip ,则我们要跟改以下几个操作: 在我们的网络源的源模式中,你若是想在 ...
- beta阶段——项目复审
beta阶段--项目复审 小组的名字和链接 优点 缺点 bug 排名顺序 颜罗王team http://www.cnblogs.com/LDLYMteam 界面清新,音乐能够选择是否播放,词汇按照四六 ...
- git因commit的记录太大导致push失败解决方法
发现好像这个方法不好使.......~~!还是会失败 如果有人或者自己失误把不该同步的大文件如数据或日志或其他中间文件给commit了并且push了,然后你删掉了,但是其实他仍然在你的git记录中,你 ...
- ssh & sftp & MacOS
ssh & sftp & MacOS https://www.technoduet.com/a-simple-way-to-connect-to-remote-ftp-sever-on ...
- [poi2011]bzoj 2277 —— strongbox·[洛谷3518]
·问题描述· 有一个密码箱,0到n-1中的某些数是它的密码.且满足:如果a和b都是它的密码,那么(a+b)%n也是它的密码.某人试了k次密码,前k-1次都失败了,最后一次成功. 问:该密码箱最多有多少 ...
- Qt 多线程同步与通信
Qt 多线程同步与通信 1 多线程同步 Qt提供了以下几个类来完成这一点:QMutex.QMutexLocker.QSemphore.QWaitCondition. 当然可能还包含QReadWrite ...
- poll() 与 select()比较
比较poll() 与select() 尽管poll()和select()所做的是相同的工作,不过poll()优于select(),原因: 1.poll()不需要用户计算并传递作为参数的最高编号的 ...
- NOIP2003 传染病控制 【搜索 + 卡时】
题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的蔓延.不幸的是,由于人们尚未完全认识这种传染病,难以准确判别病毒携带 ...
- Linux内核设计第三周学习总结 跟踪分析Linux内核的启动过程
陈巧然 原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验步骤 登陆实验楼虚 ...
- 阿里云ECS环境部署 centos 6.5
阿里云ESC服务器1 先挂载磁盘 参考:http://help.aliyun.com/view/11108189_13491193.html?spm=5176.2020520101.121.2.1wc ...