類似酷狗主頁面的輪播點選效果
阿新 • • 發佈:2019-02-12
第一步,實現自動輪播
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(); });