图片轮番

<div class="wrap">
		<ul class="banner">
			<li class="active">
				<a href="#"><img src="./imgs/banner1.jpg"></a>
			</li>
			<li>
				<a href="#"><img src="./imgs/banner2.jpg"></a>
			</li>
			<li>
				<a href="#"><img src="./imgs/banner3.jpg"></a>
			</li>
			<li>
				<a href="#"><img src="./imgs/banner4.jpg"></a>
			</li>
			<li>
				<a href="#"><img src="./imgs/banner5.jpg"></a>
			</li>
		</ul>
		<ul class="yuandian">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<div class="left"></div>
		<div class="right"></div>
	</div>

<style type="text/css">
	body,ul,li,div{
		margin:0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	.wrap{
		position: relative;
		width: 500px;
		height: auto;
		margin:10px auto;
		overflow: hidden;
	}
	.banner{
		width: 2500px;
		height: auto;
	}
	.banner>li{
		display: none;
		width: 500px;
		height: auto;
		float: left;
		text-align: center;
	}
	.banner>li.active{
		display: block;
	}
	.banner>li>a{
		display: inline-block;
		width: 500px;
		height: auto;
	}
	.banner>li>a>img{
		display: block;
		width: 500px;
		height: auto;
	}
	.banner,.yuandian:after{
		content: ‘‘;
		display: block;
		clear: both;
	}
	.yuandian{
		position: absolute;
		left: 50%;
		bottom: 10px;
		margin-left: -45px;
	}
	.yuandian>li{
		float: left;
		margin-right: 10px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: white;
	}
	.yuandian>li:hover{
		cursor: pointer;
	}
	.yuandian>li.active{
		background-color: orange;
		
	}
	/*.yuandian>li>span{
		/*display: inline-block;*/
	/*	width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: white;
	}*/
	.left{
		position: absolute;
		background-color:#967F7F;
		width: 40px;
		height: 50px;
		top:50%;
		margin-top: -25px;
		left: 0;
	}
	.left:hover{
		background-color: #C5B2B2;
		cursor: pointer;
	}
	.left:before{
		display: block;
		text-align: center;
		content: ‘<‘;
		line-height: 50px;
		font-size: 40px;
		font-weight: bold;
	}
	.right{
		position: absolute;
		background-color: #967F7F;
		width: 40px;
		height: 50px;
		top:50%;
		margin-top: -25px;
		right: 0;
	}
	.right:hover{
		background-color: #C5B2B2;
		cursor: pointer;
	}
	.right:before{
		display: block;
		text-align: center;
		content: ‘>‘;
		line-height: 50px;
		font-size: 40px;
		font-weight: bold;
	}
	</style>

<script type="text/javascript" src="./jquery.1.7.2.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
			var 
				banner_li=$(‘.banner>li‘),
				yuandian_li=$(‘.yuandian>li‘),
				left=$(‘.left‘),
				right=$(‘.right‘),
				indexbanner=0;
			yuandian_li.click(function(){
				var index=yuandian_li.index(this);
				yuandian_li.removeClass(‘active‘).eq(index).addClass(‘active‘);
				banner_li.removeClass(‘active‘).eq(index).addClass(‘active‘);
				banner_li.hide().eq(index).fadeIn(‘slow‘);
			});
			left.click(function(){
				if(--indexbanner<0){
					indexbanner=4;
				}
				yuandian_li.eq(indexbanner).click();
			});
			right.click(function(){
				if(++indexbanner>4){
					indexbanner=0;
				}
				yuandian_li.eq(indexbanner).click();
			});
	});
	</script>