基于Jquery实现的一个图片滚动切换

2020-05-16 18:43:03易采站长站整理

{
linknum=0;
}
mvul.animate({top:-(linknum*imgHeight)},400);//用animate属性实现滚动,’linknum*imgHeight’方便和按钮同步
$(“.imgMvNum a”).removeClass(“changeThis”);//移除样式
$(“.imgMvNum a”).eq(linknum).addClass(“changeThis”);//添加样式
}
}
function startMv(){
mvTimer=setInterval(imgMv,4000);//定时器函数
}
startMv();//运行定时器
$(“.imgMvNum a”).each(function(){//遍历按钮
$(this).mouseover(function(){//鼠标经过按钮
clearInterval(mvTimer);//清除定时器
linknum=$(this).index();//鼠标经过按钮将linknum设置为当前按钮索引
$(“.imgMvNum a”).removeClass(“changeThis”);
$(this).addClass(“changeThis”);
mvul.animate({top:-(linknum*imgHeight)},300);//用animate属性实现滚动,’linknum*imgHeight’方便和按钮同步
}).mouseout(function(){
startMv();//鼠标移出再次执行定时器
});
});

每句都注释清楚了哈。这里只是简单的写了个简单的向上效果,代码可能也不优化。主要是给大家参考和提供思路。
大家可以把这些效果封装成插件,再编写一些其它的方向或效果。
看下效果(这个文章里面样式没法完全放进来,大家可以复制到自己电脑)