《基于jquery实现轮播特效.doc》由会员分享，可在线阅读，更多相关《基于jquery实现轮播特效.doc（8页珍藏版）》请在金锄头文库上搜索。
1、基于jquery实现轮播特效这篇文章主要为大家详细介绍了基于jquery实现轮播特效的相关资料，感兴趣的小伙伴们可以参考一下轮播是学习jquery开始的第二个实现的动效，也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题，请教过很多人，也多次问过度娘。今天，也不敢果敢的说，可以马上写好一个轮播。希望是通过随笔的方式，记录下一些思维过程。首先是html结构，一个简单的轮播，单张图片无缝轮播，主要分为三大层：divulli，li里面的img图片。其次，css样式：div固定住宽高，overflow：hidden；ul的宽度建议是动态获取（下一步会讲是怎么获取）；关于li我习惯使用浮
2、动，让他们依次排列，在ul上要记得清楚浮动（clear：both）。重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在写方法之前，缕清一下动效的逻辑：图片依次循环自右向左滑过，当滑完最后一张时，张显示，如此重复。1、获取li的个数length和宽度widthvar len=$(li).length,liWidth=$(li).width,因为是无缝轮播，要实现自然的过渡，我们还得做点什么，当图片滑到最后一张时，怎么样才会很自然的过渡到张，这个时候，如果张就在最后一张的后面，就可以了，所以，我们需要将张clone后append到li的最后
3、$(li:first).clone .appendTo(ul)2、获取ul的宽度：ul的宽度等于所有li的宽度加上克隆的li的宽度ulWidth=liWidth*(len+1)似乎准备工作都做好了，那下一步我们就尝试让他动起来，首先想到是animate（）方法：animate( properties , duration , easing , plete )，个参数properties：css的属性和值的对象，决定动画的效果，是上下还是左右等；第二个参数duration：完成一个动画的时间，默认是400，单位是毫秒；第三个参数easing：动画过渡使用的缓动函数，默认是swing（linear
4、，swing），一般不用这个参数；第四个参数plete：是指完成动画后执行的操作。我们的动效是自右向左，所以通过改变ul的margin-left值来实现$(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的时候，图片
5、自动播放。这是要用到hover（）和setInterval（）setInterval（）在W3C是这样解释的：按照指定的周期（以毫秒计）来调用函数或计算表达式。不停地调用函数，直到 clearInterval 被调用或窗口被关闭。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).c
6、ss(margin-left:0px)；index+;);，3000).trigger(mouseleave);这样，一个自动播放的功能似乎就实现了，可是我们还可以发现一个bug，帧停留的时间似乎有些长，为什么呢？这个问题还是昨天得到了解决，当图片执行到最后一张时，他的index马上变为0，然后会执行两次，因此在这个判断中，我们需要当index为0时，让它自加1，index+，放到判断条件下。还有一个问题，是昨天发现的，在这个轮播里面有两个时间，一个是动画执行时间，一个是播放时间，前者的时间一定要比后者的时间小，原因是js的执行顺序呢是自上而下的，如果时间一致或者后者时间小于前者，那么，在这个
7、时差里，动画将进不到判断条件里来，会一直播放，那么轮播就失败了。今天就分享到这里，下一次分享加上左右箭头和hover圆点的轮播效果。附上完整的代码：轮播 body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4margin:0;padding:0;list-style:none; body,button,input,select,textareafont:12px Arial, Helvetica, sans-serif;color:#333; input,select,textareafont-size:100%; .clearfix:af
8、terdisplay:block;content:.;height:0;visibility:hidden;clear:both;font-size:0;line-height:0; .clearfix*zoom:1; .big-screenwidth: 100%; height: 400px; overflow: hidden; margin: 40px 0; .pic-listheight: 400px; .pic-list lifloat: left; width: 1920px; height: 400px; $(document).ready(function var ul=$(.p
9、ic-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(indexliLen) index=0; ul.css(margin-left:-liW*index); index+; ); $(.big-screen).hover(function clearInterval(autoPlay); ,function autoPlay=setInterval(function play ; index+; ,500) ).trigger(mouseleave);)以上就是本文的全部内容，希望对大家的学习有所帮助。
