您的位置:首页 > 其它

jq实现方向轮播图-简易版

2015-10-29 20:10 756 查看


如此直接用js既可以实现目的
/*轮播图显示*/

function play(){
_index ++;
$(".adv-img").animate({left: (-1200) * _index},300,function(){
if(_index >= Maximg){
$(".adv-img").css("left","0px");
_index = 0;
}
$(".adv-mov > span").eq(_index).addClass("show").siblings().removeClass("show");
});
}
cleartime = setInterval(function(){
play();
},3000);
$(".adv-float").hover(function(){
clearInterval(cleartime);
},function(){
cleartime = setInterval(play,3000);
});
$(".adv-mov > span").click(function(){
var inx = $(this).index();
_index = inx - 1;
play();
});


对于图片的增加可以通过一个变量直接控制代码中的数据
/*初始化列表*/
var _index = 0,Maximg = 2;
for(var i = 0 ;i <= Maximg;i ++){
$(".adv-img > ul").append("<li><img src='images/ZY" + (i % Maximg + 1) + ".jpg'/></li>");
}


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: