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

最新推荐文章于 2019-12-27 15:51:36 发布

可爱的黄油手

最新推荐文章于 2019-12-27 15:51:36 发布

阅读量946

点赞数 2

本文链接：https://blog.csdn.net/gengzhi1293443962/article/details/71345056

版权

第一步，实现自动轮播

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