一、主体程序
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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样式
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | *{ 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代码一：
?
| 1 2 3 4 5 6 | var timer= null ; //定时器返回值，主要用于关闭定时器 var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0 timer=setInterval( function (){ //打开定时器 iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片 showNumber.eq(iNow).trigger( "click" ); //模拟触发数字按钮的click事件 },2000); //2000为轮播的时间 |
上面的程序可以实现每隔2S图片的轮播效果，但是轮播到最后一张图的时候会停止，因为没有判断iNow是否到达最后一张图，所以有了下面的代码二：
?
| 1 2 3 4 5 6 7 8 9 | 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程序的完整代码程序如下：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(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动画展示出错的效果：
看到上面的效果你就会忽然大悟，图片自动轮播时，你就算点击按钮它也只是附和你一下，跳转到你点击的按钮，但是仅仅持续一会还是按它轮播的次序，不理会你点击的按钮后应该走的轮播次序，至于原因嘛
是因为手动点击时index的值未赋值给定时器的图片索引iNow，这样iNow就无法存储你点击的按钮索引值，也就是不知道你点击的哪个按钮，既然知道了原因，那么下面就需要进行修改了。
修改完成后的jQuery程序最终版就是：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(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为轮播的时间 }) |
