1. 程式人生 > >類似酷狗主頁面的輪播點選效果

類似酷狗主頁面的輪播點選效果


第一步,實現自動輪播

	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();
		});