关于jQuery轮播动画

作为学习笔记轮播动画，不废话，直接上代码：

HTML插入三张图片：

<div class="body2">
<ul class="slider">
<li><a><img src="xtf_images/rollimg1.jpg" class="bodyimg2" name="img1"></a></li>
<li><a><img src="xtf_images/rollimg2.jpg" class="bodyimg2" name="img2" ></a></li>
<li><a><img src="xtf_images/rollimg3.jpg" class="bodyimg2" name=img3></a></li>
</ul>
</div>

设置样式，注意图片与div大小

.slider{
position:relative;
height:395px;
margin-top:0px;
}
li{
list-style:none;
}

.body2{
position:absolute;
top:30.3%;
left:11.8%;
height:400px;
width:1147.5px;
overflow:hidden;
}

js方法

//图片滚动

$(document).ready(function(){
var len=$(".slider>li").length;
var index=0;
var adTimer;
$(".slider>li").mouseover(function(){
index=$(".slider>li").index(this);
}).eq(0).mouseover();//鼠标离开时开始动画
//鼠标悬停时停止动画
$(".slider").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImg(index);
index++;
if(index==len){
index=0;
}
},3000);
}
).trigger("mouseleave");
//图片轮换
});
function showImg(index){
var adHeight=$(".body2>ul>li:first").height();
$(".slider").stop(true,false).animate({
marginTop:-adHeight*index+"px"
},1000);
}

关于实现方法里面的元素，比较简单，查资料就可以了