标签：
以前做轮播图，都是宽度，高度有一个固定的大小; 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)
})
这样就不会在有滚动条向上弹的现象了;
标签：
原文地址：http://www.cnblogs.com/z-sheng/p/4272079.html
