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++;

}

上述只是爲了讓你們理解原理。