jquery自适应宽度轮播图

浏览数：51 / 时间：2015年06月09日

以前做轮播图，都是宽度，高度有一个固定的大小; 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)


})

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery自适应宽度轮播图