类似酷狗主页面的轮播点击效果

第一步，实现自动轮播

var index = 0; var stop = false; function xianshi() { if (stop) { return; } if (index < 3) { index++; } else { index = 1; } $(".item img").attr("src", "image/img0" + index + ".png").show(); $(".carousel-indicators li").removeClass(); $(".carousel-indicators li").eq(index - 1).addClass("active") .siblings().removeClass(); } 第二步，实现中间白点点击变图

$(".carousel-indicators li").click( function() { stop = true; index = $(this).index() + 1; $(".carousel-indicators li").eq(index - 1).addClass( "active").siblings().removeClass(); $(".item img").attr("src", "image/img0" + index + ".png") .show(); }); $(".carousel-inner").hover(function() { stop = true; }, function() { stop = false; }); 第三步，实现悬浮停止，点击变图

var ss = setInterval(xianshi, 1500); $(".carousel-control").hover(function() { stop = true; }, function() { stop = false; }); $("[data-slide='prev']").click(function() { index--; if (index == 0) { index = 3; } $(".item img").attr("src", "image/img0" + index + ".png").show(); $(".carousel-indicators li").removeClass(); $(".carousel-indicators li").eq(index - 1).addClass("active") .siblings().removeClass(); }); $("[data-slide='next']").click(function() { index++; if (index == 4) { index = 1; } $(".item img").attr("src", "image/img0" + index + ".png").show(); $(".carousel-indicators li").removeClass(); $(".carousel-indicators li").eq(index - 1).addClass("active") .siblings().removeClass(); });