jquery实现定时自动轮播特效


Posted in Javascript onDecember 10, 2015

这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的,也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序,建议想连贯学习的小伙伴把我之前的文章看一看,看完后再看这篇文章~~~~

下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果:

 jquery实现定时自动轮播特效

对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版,免费的~~~你们懂得,就是卡卡的,真正的效果比这个速度慢,而且还是匀速,可以商用~~~所以上面的展示动画只能当做完成效果的参考。
一、主体程序

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>轮播图①(手动点击轮播)</title>
 <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
 <div class="slideShow">
 <!--图片布局开始-->
 <ul>
 <li><a href="#"><img src="img/picture01.jpg" /></a></li>
 <li><a href="#"><img src="img/picture02.jpg" /></a></li>
 <li><a href="#"><img src="img/picture03.jpg" /></a></li>
 <li><a href="#"><img src="img/picture04.jpg" /></a></li>
 </ul>
 <!--图片布局结束-->
 
 <!--按钮布局开始-->
 <div class="showNav">
 <span class="active">1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 </div>
 <!--按钮布局结束-->
 </div>
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/layout.js"></script>
 </body>
</html>

额,上面的主体程序和前一篇没有区别,未做任何修改~~~~~感兴趣的可以查看第一篇文章,我本次随笔重点会在Jquery程序里面
二、CSS样式

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px; /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
}
.slideShow ul li{
 float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

三、jQuery程序
首先说一下定时自动轮播的原理:
1、首先得开一个定时器,假设定时器的时间设置为2000ms,也就是2S定时器执行一次操作
2、定时器每隔2S执行的操作就是模拟按次序点击数字按钮,也就是触发click事件,让图片左移
先来看大体效果实现的jQuery代码一:      

var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
 timer=setInterval(function(){ //打开定时器
 iNow++;  //让图片的索引值次序加1,这样就可以实现顺序轮播图片
 showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
 },2000); //2000为轮播的时间

上面的程序可以实现每隔2S图片的轮播效果,但是轮播到最后一张图的时候会停止,因为没有判断iNow是否到达最后一张图,所以有了下面的代码二

var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
 timer=setInterval(function(){ //打开定时器
 iNow++;  //让图片的索引值次序加1,这样就可以实现顺序轮播图片
 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
 iNow=0;
 }
 showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
 },2000); //2000为轮播的时间

所以jQuery程序的完整代码程序如下:

$(document).ready(function(){
 var slideShow=$(".slideShow"), //获取最外层框架的名称
 ul=slideShow.find("ul"), 
 showNumber=slideShow.find(".showNav span"),//获取按钮
 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
 var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
 
 showNumber.on("click",function(){ //为每个按钮绑定一个点击事件 
 $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
 var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
 ul.animate({
 "left":-oneWidth*iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值index确定
 })
 });
 
 timer=setInterval(function(){ //打开定时器
 iNow++;  //让图片的索引值次序加1,这样就可以实现顺序轮播图片
 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
 iNow=0;
 }
 showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
 },2000); //2000为轮播的时间
})

上面的注释写的很详细了,主要是为了方便想学习的小伙伴看,但是实际上我写程序不会注释的那么详细,都是很简单的内容啦,看到这里你可能以为jQuery程序就完了,那就大错特错了,因为自动轮播效果是正确的,但是手动点击时就会出错,我特意做了一段Gif动画展示出错的效果:

jquery实现定时自动轮播特效

看到上面的效果你就会忽然大悟,图片自动轮播时,你就算点击按钮它也只是附和你一下,跳转到你点击的按钮,但是仅仅持续一会还是按它轮播的次序,不理会你点击的按钮后应该走的轮播次序,至于原因嘛

是因为手动点击时index的值未赋值给定时器的图片索引iNow,这样iNow就无法存储你点击的按钮索引值,也就是不知道你点击的哪个按钮,既然知道了原因,那么下面就需要进行修改了。

修改完成后的jQuery程序最终版就是:

$(document).ready(function(){
 var slideShow=$(".slideShow"), //获取最外层框架的名称
 ul=slideShow.find("ul"), 
 showNumber=slideShow.find(".showNav span"),//获取按钮
 oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
 var timer=null; //定时器返回值,主要用于关闭定时器
 var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
 
 showNumber.on("click",function(){ //为每个按钮绑定一个点击事件 
 $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
 var index=$(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
 iNow=index;
 ul.animate({
 "left":-oneWidth*iNow, //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定
 })
 });
 
 timer=setInterval(function(){ //打开定时器
 iNow++;  //让图片的索引值次序加1,这样就可以实现顺序轮播图片
 if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
 iNow=0;
 }
 showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
 },2000); //2000为轮播的时间
})

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,下次就为大家分享鼠标悬浮在轮播图上方时图片停止轮播,鼠标移走后图片接着进行轮播的代码,不要走开。

Javascript 相关文章推荐
jquery UI 1.72 之datepicker
Dec 29 Javascript
JQuery for与each性能比较分析
May 14 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 #Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 #Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 #Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 #Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 #Javascript
js实现新年倒计时效果
Dec 10 #Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
You might like
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
javascript里的条件判断
2007/02/27 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
在Django的session中使用User对象的方法
2015/07/23 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
面试后的英文感谢信
2014/02/01 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
公司晚会策划方案
2014/05/17 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
优秀员工事迹材料
2014/12/20 职场文书
工会积极分子个人总结
2015/03/03 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
十七岁的单车观后感
2015/06/12 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
JS Object构造函数之Object.freeze
2021/04/28 Javascript
Python中npy和mat文件的保存与读取
2022/04/24 Python