jquery图片轮播

第一：html页面

                                         <div class="ad">
						<ul class="slider">
							<li><img src="images/1.jpg" /></li>
							<li><img src="images/2.jpg" /></li>
							<li><img src="images/1.jpg" /></li>
							<li><img src="images/2.jpg" /></li>
							<li><img src="images/1.jpg" /></li>
						</ul>
						<ul class="num">
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<li>5</li>
						</ul>
					</div>

图片自动轮播以及点击第几张就显示第几张图片

第二：css样式

.content_right .ad{
	margin:10px;
	height:300px;
	overflow:hidden;
	position:relative;
	border:1px #AAAAAA ;
	
}
.content_right .slider li img{
	margin: 0;
	padding:0;
	display: block;
}
.content_right .slider,.content_right .num{
	position:absolute;
}
.content_right .num{
	right:5px;
	bottom:5px;
}
.content_right .num li{
	float: left;
	width:15px;
	height: 15px;
	background:#0287CA;
	margin:5px;
	text-align:center;
	padding-bottom:3px;
}

.content_right .slider{
	margin:0 auto;
	padding:0;
}
.on{
	color:white;
}

第三：js文件

//海报滚动
$(function(){
	var len=$('.num>li').length;
	var index=0;
	var adTimer=setInterval(function(){
			showImg(index);
			index++;
			if(index==len){
				index=0;
			}
		},1000);
	$('.ad').hover(function(){
		clearInterval(adTimer);
	},function(){
		adTimer=setInterval(function(){
			showImg(index);
			index++;
			if(index==len){
				index=0;
			}
		},1000);
	});
	
	$('.num li').mouseover(function(){
		index=$('.num li').index(this);
		showImg(index);
	});
	
});

function showImg(index){
	var adHeight=$('.content_right .ad').height();
	$('.slider').stop(true,false).animate({top:-(adHeight*index)},100);
	$('.num li').removeClass('on').eq(index).addClass('on');
}