滚动图片切换实现

html代码

<div id="imgsBox">
	<div class="content_right">
		<div class="ad" >
			<ul class="slider" id="slider">
							       
			</ul>
			<ul class="num" >
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			</ul>
		 </div>
	</div>
</div>

css代码

.content_right{float:left;}
.content_right .ad { 
 margin-bottom:10px;
 width:493px; 
 height:257px; 
 overflow:hidden;
 position:relative;
}
.content_right .slider,.content_right .num{
 position:absolute;
}
.content_right .slider li{ 
 list-style:none;
 display:inline;

}
.content_right .slider img{ 
 width:493px; 
 height:257px;
 display:block;
}
.content_right .num{ 
 right:5px; 
 bottom:5px;
}
.content_right .num li{
 float: left;
 color: #069;
 text-align: center;
 line-height: 16px;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 12px;
 cursor: pointer;
 overflow: hidden;
 margin: 3px 1px;
 border: 1px solid #069;
 background-color: #fff;
}
.content_right .num li.on{
 color: #fff;
 line-height: 16px;
 width: 16px;
 height: 16px;
 font-size: 14px;
 margin: 3px 1px;
 border: 1px solid #069;
 background-color: #069;
 font-weight: bold;
}

 js代码 

function showActivityImage(cxt){
	$.ajax({
		url:'pbs-psactivity!activityImage.action',
		cache:false,
		async:true,
		type:"POST",
		dataType:'json',
		success:function (lists){
			if(lists != null && lists.length>0){
				for(var i=0;i<lists.length;i++){
					$("#slider").append("<li ><a title=\""+lists[i].title+"\" href=\"pbs-psactivity!lookdetail.action?id="+lists[i].id+"\"><img src=\""+cxt+"/pbs/images/activity/"+lists[i].path+"\" /></a></li>");
				}
			}
		},
		error:function (){
			alert("失败！");
		}
	});
}

$(function(){
	  var len  = $(".num > li").length;
	  var index = 0;
	  var adTimer;
	  $(".num li").mouseover(function(){
		  index  =   $(".num li").index(this);
		  showImg(index);
	  }).eq(0).mouseover(); 
	  //滑入 停止动画，滑出开始动画.
	  $('.ad').hover(function(){
	    	clearInterval(adTimer);
	   },function(){
		    adTimer = setInterval(function(){
		       showImg(index)
		    index++;
		    if(index==len){index=0;}
		     } , 2000);
	  }).trigger("mouseleave");
});
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
	var adHeight = $(".content_right .ad").height();
	$(".slider").stop(true,false).animate({bottom : -adHeight*index},1000);
	$(".num li").removeClass("on").eq(index).addClass("on");
}