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

来源:互联网 发布:柔术 知乎 编辑:程序博客网 时间:2024/06/05 15:50


如此直接用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>");}


1 1
原创粉丝点击