欢迎来到天天文库
浏览记录
ID:63496869
大小:14.11 KB
页数:6页
时间:2021-08-24
《Jquery轮播效果实现过程解析_》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、Jquery轮播效果实现过程解析_这篇文章主要为大家具体的分析了Jquery轮播效果实现过程的具体步骤以及实现思路,关心大家快速实现Jquery轮播效果,感爱好的小伙伴们可以参考一下轮播是学习jquery开头的其次个实现的动效,也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题,请教过许多人,也多次问过度娘。今日,也不敢果敢的说,可以马上写好一个轮播。盼望是通过随笔的方式,记录下一些思维过程。首先是html结构,一个简洁的轮播,单张图片无缝轮播,主要分为三大层:divulli,li里面的img图片。其次,css样式:div固定住宽高,o
2、verflow:hidden;ul的宽度建议是动态猎取(下一步会讲是怎么猎取);关于li我习惯用法浮动,让他们依次排列,在ul上要记得清晰浮动(clear:both)。重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的规律:图片依次循环自右向左滑过,当滑完最终一张时,第一张显示,如此重复。1、猎取li的个数length和宽度widthvarlen=$('li').length,liWidth=$('li').width,由于是无缝轮播,要实现自然的过渡,我们还得做点什么
3、,当图片滑到最终一张时,怎么样才会很自然的过渡到第一张,这个时候,假如第一张就在最终一张的后面,就可以了,所以,我们需要将第一张clone后append到li的最终$('li:first').clone().appendTo('ul')2、猎取ul的宽度:ul的宽度等于全部li的宽度加上克隆的li的宽度ulWidth=liWidth*(len+1)好像预备工作都做好了,那下一步我们就尝试让他动起来,首先想到是animate()方法:animate(properties[,duration][,easing][,complete]),第一个参数prope
4、rties:css的属性和值的对象,决定动画的效果,是上下还是左右等;其次个参数duration:完成一个动画的时间,默认是400,单位是毫秒;第三个参数easing:动画过渡用法的缓动函数,默认是swing(linear,swing),一般不用这个参数;第四个参数complete:是指完成动画后执行的操作。我们的动效是自右向左,所以通过转变ul的margin-left值来实现$('ul').animate({'marign-left':-liWidth*index},3000,function(){if(index==len){index=0;$('
5、ul').css({'margin-left':'0px'})}})其中index指的是li的索引值,当li的索引值等于li的length值的时候,也就是动画执行到了最终一张,那么挺直让ul的margin-left为0,li的索引值也为0。这样还存在一个隐患,临时不提。下一步,当鼠标离开div的时候,图片自动播放。这是要用到hover()和setInterval()setInterval()在W3C是这样说明的:根据指定的周期(以毫秒计)来调用函数或计算表达式。不停地调用函数,直到clearInterval()被调用或窗口被关闭。varautoPlay
6、;$('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');这样,一个自动播放的功能好像就实现了
7、,可是我们还可以发觉一个bug,第一帧停留的时间好像有些长,为什么呢?这个问题还是昨天得到了解决,当图片执行到最终一张时,他的index马上变为0,然后会执行两次,因此在这个推断中,我们需要当index为0时,让它自加1,index++,放到推断条件下。还有一个问题,是昨天发觉的,在这个轮播里面有两个时间,一个是动画执行时间,一个是播放时间,前者的时间肯定要比后者的时间小,缘由是js的执行挨次呢是自上而下的,,假如时间全都或者后者时间小于前者,那么,在这个时差里,动画将进不到推断条件里来,会始终播放,那么轮播就失败了。今日就分享到这里,下一次分享加上左
8、右箭头和hover圆点的轮播效果。附上完整的代码:htmlheadmetahttp-equiv
此文档下载收益归作者所有