这次的轮播图是在上一篇文章jQuery手动点击实现图片轮播特效的基础上写出来的，也就是本次展示的是手动点击轮播效果以及定时自动轮播效果的程序，建议想连贯学习的小伙伴把我之前的文章看一看，看完后再看这篇文章~~~~
下面来看看我做的最终定时自动轮播效果以及手动点击轮播效果：
对于上面的展示动画速度比较快的原因是因为我的截图软件是绿色版，免费的~~~你们懂得，就是卡卡的，真正的效果比这个速度慢，而且还是匀速，可以商用~~~所以上面的展示动画只能当做完成效果的参考。
一、主体程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①（手动点击轮播）</title> <link type="text/css" href="https://www.jb51.net/css/layout.css" /> </head> <body> <div> <!--图片布局开始--> <ul> <li><a href="#"><img src="https://www.jb51.net/img/picture01.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/img/picture02.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/img/picture03.jpg" /></a></li> <li><a href="#"><img src="https://www.jb51.net/img/picture04.jpg" /></a></li> </ul> <!--图片布局结束--> <!--按钮布局开始--> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按钮布局结束--> </div> <script src="https://www.jb51.net/js/jquery-1.11.3.js"></script> <script src="https://www.jb51.net/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程序的完整代码程序如下：