JQ轮播

Posted 空间机器

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQ轮播相关的知识,希望对你有一定的参考价值。

首先是html结构,一个简单的轮播,主要分为三大层:div>ul>li,li里面的img图片。

其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。

重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的逻辑:图片依次循环自右向左滑过,当滑完最后一张时,第一张显示,如此重复

1、获取li的个数length和宽度width 

2、获取ul的宽度:ul的宽度等于所有li的宽度加上克隆的li的宽
首先想到是animate()方法:
animate( properties [, duration ] [, easing ] [, complete ] ),

第一个参数properties:css的属性和值的对象,决定动画的效果,是上下还是左右等;

    第二个参数duration:完成一个动画的时间,默认是400,单位是毫秒;

    第三个参数easing:动画过渡使用的缓动函数,默认是swing(linear,swing),一般不用这个参数;

    第四个参数complete:是指完成动画后执行的操作。

我们的动效是自右向左,所以通过改变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的时候,图片自动播放。这是要用到hover()和setInterval()

setInterval()在W3C是这样解释的:按照指定的周期(以毫秒计)来调用函数或计算表达式。不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

 

以上是关于JQ轮播的主要内容,如果未能解决你的问题,请参考以下文章

一分钟搞定AlloyTouch图片轮播

一分钟搞定AlloyTouch图片轮播

纯前端实现—JQ轮播图(轮播图完全版)

纯前端实现—JQ轮播图(轮播图完全版)

jq轮播图支持ie7

自己做的jq图片轮播