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 相关文章推荐
支持ie与FireFox的剪切板操作代码
Sep 28 Javascript
JQuery 网站换肤功能实现代码
Nov 02 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
php把session写入数据库示例
2014/02/26 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
php DES加密算法实例分析
2019/09/18 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python实现大文件排序的方法
2015/07/10 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
班组长岗位职责范本
2014/01/05 职场文书
高一新生军训方案
2014/05/12 职场文书
绿色环保口号
2014/06/12 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
体育教师个人总结
2015/02/09 职场文书