JQUERY演示图片上下滑动展示效果

.mobansContainer{margin:0; padding:0;overflow:hidden;position:relative;}
.mobansSlider{position:absolute;}
.mobansSlider li{ list-style:none;display:inline;}
.rotatorNumber{position:absolute; right:5px; bottom:5px;}
.rotatorNumber li{float: left; color: #FF7300; 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 #FF7300; background-color: #fff;}
.rotatorNumber li.on{color: #fff; line-height: 21px; width: 21px; height: 21px; font-size: 16px; margin: 0 1px; border: 0; background-color: #FF7300; font-weight: bold;}
.mobansSlider img {height:188px;width:545px;border-width:0px;display:block;}

jquery确实是个好东西，简单方便，代码优美。下面是一个JQUERY实现的图片上下滚动的代码，模仿淘宝首页的广告图片展示效果
调用代码

$(function(){
var len = $("#numeric > li").length;
var index = 0;
$("#numeric li").mouseover(function(){
index = $("#numeric li").index(this);
rotatorimg(index);
});
$("#timer").hover(function(){
if(MyTime){
clearInterval(MyTime);
}
},function(){
interval = setInterval(function(){
rotatorimg(index)
index++;
if(index==len){index=0;}
} , 2000);
});
var interval = setInterval(function(){
rotatorimg(index)
index++;
if(index==len){index=0;}
} , 5000);
})

function rotatorimg(i){
$("#mobanscnSlider").stop(true,false).animate({top : -188*i},400);
$("#numeric li").eq(i).addClass("on").siblings().removeClass("on");
}














1
2
3
4
下载地址：http://files.cnblogs.com/dotnetshow/Slider.rar

$(function(){
var len = $("#mobanscnNumer > li").length;
var index = 0;
$("#mobanscnNumer li").mouseover(function(){
index = $("#mobanscnNumer li").index(this);
show_ad2Rotator_Images(index);
});
$("#ad2Rotator_mobansContainer").hover(function(){
if(MyTime){
clearInterval(MyTime);
}
},function(){
MyTime = setInterval(function(){
show_ad2Rotator_Images(index)
index++;
if(index==len){index=0;}
} , 5000);
});
var MyTime = setInterval(function(){
show_ad2Rotator_Images(index)
index++;
if(index==len){index=0;}
} , 5000);
})
function show_ad2Rotator_Images(i){
$("#mobanscnSlider").stop(true,false).animate({top : -188*i},400);
$("#mobanscnNumer li").eq(i).addClass("on").siblings().removeClass("on");
}