100%宽屏banner，轮番

今天练习，100%宽度banner图。但是由于技术原因，我还不知道怎么去动态的改变整个banner的高度。请路过的大神指点一二。

源代码免费下载地址在博文尾部。

HTML代码

<div id="banner">
		<ul>
			<li><img src="images/a1.jpg"></li>
			<li><img src="images/a2.jpg"></li>
			<li><img src="images/a3.jpg"></li>
			<li><img src="images/a4.jpg"></li>
			<li><img src="images/a5.jpg"></li>
		</ul>
</div>

css代码：

*{margin: 0;padding: 0;}
img{border: none;}
#banner{width: 100%;height: 500px;position: relative;overflow: hidden;}
#banner ul{height: 100%;position: absolute;background: #ccc;}
#banner ul li{height: 100%;float: left;list-style: none;}
#banner ul li img{width: 100%;height: 100%;}
#Pre,#Next{width: 50px;height: 100px;position: absolute;background: pink;cursor: pointer;opacity:0;}
#Pre{left: 0;}
#Next{right: 0;}
#bannerDown{width: 100%;height: 50px;text-align: center;background: cyan;position: absolute;bottom: 0;opacity:0;}
#bannerDown span{width: 20px;height: 20px;text-align: center;cursor: pointer;
	line-height: 20px;font-size: 14px;background: yellow;padding: 0 10px 0;margin: 5px;}
#bannerDown .bg{background: pink;}

js代码

$(function(){
	var index=0;
	var len=$("#banner ul li").length;
	var PreNext="<div id='Pre'></div><div id='Next'></div>";//上一个，下一个按钮
	var BannerBottm="<div id='bannerDown'>";
	var AUTO=null;
	var Time=3000;

	AUTONow();//自动播放方法调用

	//设置ul的宽度
	$("#banner ul").css({width:len+'00%'});
	//设置li的宽度
	$("#banner ul li").css({width:100/len+'%'});
	//动态获取span个数
	for(var i=1;i<len+1;i++){
		BannerBottm+='<span>'+i+'</span>';
	}
	//闭合
	BannerBottm+='</div>';
	//添加上一个下一个，按钮、以及下方的触发按钮
	$("#banner").append(PreNext,BannerBottm);
	//动态的计算出按钮的高度
	var Top=($("#banner").height()-$("#bannerDown").height()-$("#Pre").height())/2;
	$("#Pre,#Next").css({top:Top});
	
	//给span添加滑动事件
	$("#bannerDown span").mousemove(function(){
		index=$(this).index();
		showImg(index);
	});

	//上一个
	$("#Pre").click(function(){
		if(index==0){
			index=len-1;
			showImg(index);
		}else{
			index--;
			showImg(index);
		}
	});
	//下一个
	$("#Next").click(function(){
		if(index==len-1){
			index=0;
			showImg(index);
		}else{
			index++;
			showImg(index);
		}
	});

	//自动播放方法
	function AUTONow(){
		AUTO=setInterval(function(){
			if(index==len-1){
				index=0;
				showImg(index);
			}else{
				index++;
				showImg(index);
			}
		},Time);
	}
	//鼠标进入，退出事件
	$("#banner").hover(
		function(){
			$("#Pre,#Next,#bannerDown").stop().animate({opacity:"0.7"},2000);
			clearInterval(AUTO);
		},
		function(){
			$("#Pre,#Next,#bannerDown").stop().animate({opacity:"0"},2000);
			AUTONow();
		}
	);
	//图片显示方法
	function showImg(index){
		var Lleft=-index*100;
		$("#bannerDown span").eq(index).addClass("bg").siblings().removeClass("bg");
		$("#banner ul").stop().animate({left:Lleft+'%'},2000);
	}
});

资源免费下载： http://download.csdn.net/detail/u014703834/8102527