jQuery 图片滚动的3种方法

1.左右滚动

思路分析：使用相对定位，最外层的一个盒子使用相对定位，要滚动的盒子使用绝对定位。

CSS

.banner{width:592px; height:160px; position:relative; overflow:hidden;}

.bannerCon{position:absolute; left:0; top:0; width:2500px;}

.bannerCon li{float:left; margin:10px 2px 0; padding:8px; display:inline;}

jQuery

jquery代码相似于这样子，就是经过控制滚动的时候定位到另一屏要显示的位置，这时咱们改动的就是left的值了。

咱们能够求出外围。

var width=$(".banner").width(); var index;

由触发的动做能够求出index的变化值。经过jQuery的animate。

var index=1;

var num =4;

if(index==num){$(".bannerCon").animate({left:0});index=1;}else{

$(".bannerCon").animate({left:'-='+width});

index++;}

经过这个动做来改变内层盒子的左边位置，实现了动画的滚动，固然由于咱们首先定位的内层盒子的left:0;因此在右边的内容向左滚动就是负值了。相信学过css的童鞋都懂的。

2.上下滚动

原理同上面，只不过，如今咱们要求算的值不是外层盒子的宽度，而是它的高度。经过设置外层盒子的top:0;那么如今的盒子滚动的jQuery代码相似于

var index=1;

var num =4;

if(index==num){$(".bannerCon").animate({left:0});index=1;}else{

$(".bannerCon").animate({top:'-='+height;});

index++;}

3.淡入淡出滚动

这种使用的代码我认识有两种。一种是图片替换法，一种则是使用jQuery的另一个动画slideUp和slideDown了。

第一种思路：这个是一个技巧来的，其实就是经过切换动画的时候改变图片的地址了。其实就是改变数字。图片的地址一般会这样子写，images/banner1.jpg,images/banner2.jpg.看懂了没，就是经过动画滚动的时候改变数字，不过这种方法比较有局限，不适合全部的类型，好比若是要添加的动画不止一个图片，还有其余文字和多个图片排列在一块儿也是不行的。

第二种思路：这种也是经常使用的，多是切换的不会太忽然吧。这种一般是切换动画的时候，把全部的内容slideUp，而后把须要出现的内容slideDown.

jQuery代码能够是这样

var index;

var num=4;

if(index==num){

$(".inner").slideUp;

$(".inner >ul:first").slideDown;

}else{

$(".inner").slideUp;

$(".inner > ul").eq(index).slideDown;

index++;

}

上述只是为了让你们理解原理。