JQUERY演示图片上下滑动展示效果
jquery确实是个好东西,简单方便,代码优美。下面是一个JQUERY实现的图片上下滚动的代码,模仿淘宝首页的广告图片展示效果
调用代码
下载地址:https://files.cnblogs.com/dotnetshow/Slider.rar
调用代码
$(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");
}
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");
}
下载地址:https://files.cnblogs.com/dotnetshow/Slider.rar