Jquery轮播效果实现过程解析
轮播是学习jquery开始的第二个实现的动效,也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题,请教过很多人,也多次问过度娘。今天,也不敢果敢的说,可以马上写好一个轮播。希望是通过随笔的方式,记录下一些思维过程。
首先是html结构,一个简单的轮播,单张图片无缝轮播,主要分为三大层:div>ul>li,li里面的img图片。
其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。
重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的逻辑:图片依次循环自右向左滑过,当滑完最后一张时,第一张显示,如此重复。
1、获取li的个数length和宽度width
1 2 | var len=$( 'li' ).length, liWidth=$( 'li' ).width, |
因为是无缝轮播,要实现自然的过渡,我们还得做点什么,当图片滑到最后一张时,怎么样才会很自然的过渡到第一张,这个时候,如果第一张就在最后一张的后面,就可以了,所以,我们需要将第一张clone后append到li的最后
$('li:first').clone().appendTo('ul')
2、获取ul的宽度:ul的宽度等于所有li的宽度加上克隆的li的宽度
ulWidth=liWidth*(len+1)
似乎准备工作都做好了,那下一步我们就尝试让他动起来,首先想到是animate()方法:
animate( properties [, duration ] [, easing ] [, complete ] ),
第一个参数properties:css的属性和值的对象,决定动画的效果,是上下还是左右等;
第二个参数duration:完成一个动画的时间,默认是400,单位是毫秒;
第三个参数easing:动画过渡使用的缓动函数,默认是swing(linear,swing),一般不用这个参数;
第四个参数complete:是指完成动画后执行的操作。
我们的动效是自右向左,所以通过改变ul的margin-left值来实现
1 2 3 4 5 6 7 8 | $( 'ul' ).animate({ 'marign-left' : -liWidth*index },3000, function (){ if (index==len){ index=0; $( 'ul' ).css({ 'margin-left' : '0px' }) } }) |
其中index指的是li的索引值,当li的索引值等于li的length值的时候,也就是动画执行到了最后一张,那么直接让ul的margin-left为0,li的索引值也为0。
这样还存在一个隐患,暂时不提。
下一步,当鼠标离开div的时候,图片自动播放。这是要用到hover()和setInterval()
setInterval()在W3C是这样解释的:按照指定的周期(以毫秒计)来调用函数或计算表达式。不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var autoPlay; $( 'div' ).hover( function (){ clearInterval(autoPlay); }, function (){ autoPlay=setInterval( function (){ $( 'ul' ).animate({ 'marign-left' : -liWidth*index },3000, function (){ if (index==len){ index=0; $( 'ul' ).css({ 'margin-left' : '0px' }); index++; } }); },3000) }).trigger( 'mouseleave' ); |
这样,一个自动播放的功能似乎就实现了,可是我们还可以发现一个bug,第一帧停留的时间似乎有些长,为什么呢?
这个问题还是昨天得到了解决,当图片执行到最后一张时,他的index马上变为0,然后会执行两次,因此在这个判断中,我们需要当index为0时,让它自加1,index++,放到判断条件下。
还有一个问题,是昨天发现的,在这个轮播里面有两个时间,一个是动画执行时间,一个是播放时间,前者的时间一定要比后者的时间小,原因是js的执行顺序呢是自上而下的,,如果时间一致或者后者时间小于前者,那么,在这个时差里,动画将进不到判断条件里来,会一直播放,那么轮播就失败了。今天就分享到这里,下一次分享加上左右箭头和hover圆点的轮播效果。
附上完整的代码:
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>轮播</title> <style> body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0;list-style:none;} body,button,input,select,textarea{font:12px Arial, Helvetica, sans-serif;color:#333;} input,select,textarea{font-size:100%;} .clearfix:after{display:block;content: "." ;height:0;visibility:hidden;clear:both;font-size:0;line-height:0;} .clearfix{*zoom:1;} .big-screen{width: 100%; height: 400px; overflow: hidden; margin: 40px 0;} .pic-list{height: 400px;} .pic-list li{float: left; width: 1920px; height: 400px;} </style> </head> <body> <div class = "big-screen" > <ul class = "pic-list clearfix" > <li> <a href= "javascript:;" > <img src= "http://fed.yhd.cn:9000/1920x400/27ae60xfff" alt= "picture" width= "1920" height= "400" /> </a> </li> <li> <a href= "javascript:;" > <img src= "http://fed.yhd.cn:9000/1920x400/ae273axfff" alt= "picture" width= "1920" height= "400" /> </a> </li> <li> <a href= "javascript:;" > <img src= "http://fed.yhd.cn:9000/1920x400/2757aexfff" alt= "picture" width= "1920" height= "400" /> </a> </li> <li> <a href= "javascript:;" > <img src= "http://fed.yhd.cn:9000/1920x400/ae7d27xfff" alt= "picture" width= "1920" height= "400" /> </a> </li> </ul> </div> </body> <script type= "text/javascript" src= "http://libs.baidu.com/jquery/1.11.3/jquery.min.js" ></script> <script type= "text/javascript" > $(document).ready( function (){ var ul=$( '.pic-list' ), li=ul.find( 'li' ), liW=li.outerWidth(true), liLen=li.length, index=0, autoPlay; li.first(). clone ().appendTo(ul); ul.css({ 'width' :liW*(liLen+1), 'margin-left' :-liW*index}); function play(){ if (!ul.is( 'animated' )){ ul.stop().animate({ 'margin-left' :-liW*index },480, function (){ if (index>liLen){ index=0; ul.css({ 'margin-left' :-liW*index}); index++; } }); } } $( '.big-screen' ).hover( function (){ clearInterval(autoPlay); }, function (){ autoPlay=setInterval( function (){ play(); index++; },500) }).trigger( 'mouseleave' ); }) </script> </html> |
以上就是为大家分享的jquery轮播效果完整代码,希望对大家的学习有所帮助。