以前做轮播图,都是宽度,高度有一个固定的大小; 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) })
这样就不会在有滚动条向上弹的现象了;
时间: 2024-10-31 05:01:49