资源描述：
《jquery轮播效果实现过程解析_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、Jquery轮播效果实现过程解析轮播是学习jquery开始的第二个实现的动效，也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题，请教过很多人，也多次问过度娘。今天，也不敢果敢的说，可以马上写好一个轮播。希望是通过随笔的方式，记录下一些思维过程。首先是html结构，一个简单的轮播，单张图片无缝轮播，主要分为三大层：div>ul>li,li里面的img图片。其次，css样式：div固定住宽高，overflow：hidden；ul的宽度建议是动态获取(下一步会讲是怎么获取)；关于li我习惯使用浮动，让他们依次排列，在ul上要记得清楚
2、浮动(clear：both)o重要的是jquery的方法，主要有用到的有animate(),setinterval(),hover()。在写方法Z前，缕清一下动效的逻辑：图片依次循环口右向左滑过，当滑完最后一张时，第一张显示，如此重复。1、获取li的个数length和宽度widthvarlen二$(Ti')・length,liWidth=$('li，).width,因为是无缝轮播，要实现自然的过渡，我们还得做点什么，当图片滑到最后一张时，怎么样0会很自然的过渡到第一张，这个时候，如果第一张就在最后一张的后面，就可以了，所以，我们需要将第一张cl
3、one后append到li的最后$('li:firstJ)・clone()・appendTo('ul')2、获取ul的宽度：ul的宽度等于所有li的宽度加上克隆的li的宽度ulWidth=liWidth*(len+l)似乎准备工作都做好了，那下一步我们就尝试让他动起來，首先想到是animate()方法：animate(properties[,duration][,easing][,complete]),第一个参数properties：css的属性和值的对象，决定动画的效果，是上下还是左右等；第二个参数duration：完成一个动画的时间，默认是
4、400,单位是毫秒;第三个参数easing：动画过渡使用的缓动函数，默认是swing(linear,swing),一般不用这个参数；第四个参数complete：是指完成动慚后执行的操作。我们的动效是口右向左，所以通过改变ul的margin-left值來实现$('ul').animate({Jmarign-lcft，:-liWidth*indcx},3000,function(){if(index==len){index二0;$('ul')・css({'margin-left':'0px，})}})其中index指的是li的索引值,当li的索引值
5、等于li的length值的时候，也就是动画执行到了最后一张，那么直接让ul的margin-left为0,li的索引值也为0o这样还存在一个隐患，暂时不提。下一步，当鼠标离开div的时候，图片自动播放。这是要用到hover()和setlnterval()setTnterval()在W3C是这样解释的：按照指定的周期(以毫秒计)來调用函数或计算表达式。不停地调用函数，直到clcarlntcrval()被调用或窗口被关闭。varautoPlay;$Cdiv').hover(function(){clearInterval(autoPlay);},fu
6、nction(){autoPlay=setlnterval(function(){$Cul').animale({5marign-1eft':TiWidth*indcx},3000,function(){if(index二二len){index=0;$('ul').css({'margin-left':'Opx'})；index++;})；},3000)})・trigger('mouseleave，);这样，一个自动播放的功能似乎就实现了，可是我们还可以发现一个bug,第一帧停留的时间似乎有些长，为什么呢？这个问题述是昨天得到了解决，当图片执行
7、到最后一张时，他的index马上变为0,然后会执行两次，因此在这个判断中，我们需要当index为0时，让它自加1,index++,放到判断条件下。还有一个问题，是昨天发现的，在这个轮播里面冇两个时间，一个是动画执行吋间，一个是播放时间，前者的时间一定要比后者的时间小，原因是js的执行顺序呢是自上而下的，，如果时间一致或者后者时间小于前者，那么，在这个时差里，动画将进不到判断条件里来，会一直播放，那么轮播就失败了。今天就分享到这里，下一次分享加上左右箭头和hover圆点的轮播效果。附上完整的代码：
8、iv二〃Content-Type"content二〃text/html;charset二utf-8〃/>
轮播
