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图片动起来;

  最近的一个项目中要做 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)


})

   这样就不会在有滚动条向上弹的现象了;

  

  

       

 

原文地址:https://www.cnblogs.com/z-sheng/p/4272079.html