jquery自適應寬度輪播圖

         以前做輪播圖，都是寬度，高度有一個固定的大小; juqery代碼如下：　　

$(function(){
	var n=0
	function nup(){
		if(n<2){n=n+1}else{n=0}
		$(".banner_width img").hide()
		$(".banner_width img").eq(n).fadeIn(500)
		
	}
	var timer=setInterval(nup,5000)


})

 　　這樣可以讓幾張banner圖片動起來;

 

　　最近的一個項目中要做 width:100%; height:auto; 的自適應輪播圖;

　　發現問題：

　　當用上面的方法做時會發現有一個bug;

　　在瀏覽到當前頁面的底部時，會發現右邊的滾動條向上彈;

　　

　　分析問題：

　　后來發現是因為;

　　在第一張圖片隱藏(hide)，第二張圖片還沒有顯示(fadeIn)的這個，時間段;

　　高度height:auto;它的值會變為0;

　　解決問題：

　　知道原因了，於是有這樣的一個解決辦法;

　　在頁面加載完后，我先獲取height:auto;的具體值，然后在把這個值附給height:auto;代碼如下：

$(function(){
	var n=0
	function nup(){
		if(n<2){n=n+1}else{n=0}
		$(".banner_width").css("height",$('.banner_width').height()
+'px') //獲取確定的高度，賦給div的height:auto;;
		$(".banner_width img").hide()
		$(".banner_width img").eq(n).fadeIn(500)
		
	}
	var timer=setInterval(nup,5000)


})

 

 　　這樣就不會在有滾動條向上彈的現象了;