/*文中的$("XXX")为相对应的类名或者ID,将其改为要相对的类名或者id即可*/
/*广告轮播*/ var i = 0; /*克隆第一张图片*/ var clone = $(".playImg .img li").first().clone(); /*复制到列表最后*/ $(".playImg .img").append(clone); var size = $(".playImg .img li").size(); for (var j = 0; j < size-1; j++) { $(".playImg .num").append("<li></li>"); } /*自动轮播*/ var t = setInterval(function () { i++; move();},2000); /*鼠标悬停事件*/ $(".playImg").hover(function () { clearInterval(t);//鼠标悬停时清除定时器 }, function () { t = setInterval(function () { i++; move(); }, 2000); //鼠标移出时清除定时器 }); /*移动事件*/ function move() { if (i == size) { $(".playImg .img").css({ left: 0 }); i = 1; } if (i == -1) { $(".playImg .img").css({ left: (-(size - 1) * 100) + "%" }); i = size - 2; } $(".playImg .img").stop().animate({ left: (-i * 100) + "%" }, 500); if (i == size - 1) { $(".playImg .num li").eq(0).addClass("on").siblings().removeClass("on"); } else { $(".playImg .num li").eq(i).addClass("on").siblings().removeClass("on"); } }
无缝轮播图片
最新推荐文章于 2020-04-21 09:43:43 发布