呼吸轮播图制作原理

最新推荐文章于 2020-12-17 19:46:19 发布

周帅帅Love

最新推荐文章于 2020-12-17 19:46:19 发布

阅读量466

点赞数 1

分类专栏： jquery 文章标签： jquery实现轮播图

本文链接：https://blog.csdn.net/qq_36982349/article/details/82973034

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

呼吸轮播图

轮播图：carousel
呼吸轮播图变种布局重点：所有的图片摞一起。
jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。
左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()
小圆点的防流氓的策略：立即响应新事件。stop(true)

注意：使用代码时将图片更换，以及需要引入jquery库。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ul, ol {
			list-style: none;
		}
		#carousel {
			position: relative;
			width: 900px;
			height: 540px;
			border: 1px solid #000;
			margin: 50px auto;
		}
		/*呼吸轮播图布局关键是所有图片落在一起*/
		#carousel .imgs ul li {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			display: none;
		}
		#carousel .imgs ul li:first-child {
			display: block;
		}
		.btns a {
			position: absolute;
			width: 30px;
			height: 60px;
			top: 50%;
			margin-top: -30px;
			text-decoration: none;
			background-color: rgba(0, 0, 0, .5);
			line-height: 60px;
			text-align: center;
			font-size: 20px;
			color: #fff;
		}
		.btns a:first-child {
			left: 10px;
		}
		.btns a:last-child {
			right: 10px;
		}
		#carousel .circles {
			position: absolute;
			width: 200px;
			height: 20px;
			left: 50%;
			margin-left: -100px;
			bottom: 30px;
		}
		#carousel .circles ol {
			width: 210px;
		}
		#carousel .circles ol li {
			float: left;
			width: 20px;
			height: 20px;
			margin-right: 10px;
			background-color: blue;
			line-height: 20px;
			text-align: center;
			border-radius: 20px;
		}
		#carousel .circles ol li.cur {
			background-color: orange;
		}
	</style>
</head>
<body>
	<div id="carousel">
		<div class="imgs" id="imgs">
			<ul>
				<li><img src="images/aoyun/0.jpg" alt=""></li>
				<li><img src="images/aoyun/1.jpg" alt=""></li>
				<li><img src="images/aoyun/2.jpg" alt=""></li>
				<li><img src="images/aoyun/3.jpg" alt=""></li>
				<li><img src="images/aoyun/4.jpg" alt=""></li>
				<li><img src="images/aoyun/5.jpg" alt=""></li>
				<li><img src="images/aoyun/6.jpg" alt=""></li>
			</ul>
		</div>
		<div class="btns">
			<a href="#" id="leftBtn">&lt;</a>
			<a href="#" id="rightBtn">&gt;</a>
		</div>
		<div class="circles" id="circles">
			<ol>
				<li class="cur">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ol>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 获取元素
	var $leftBtn = $("#leftBtn");
	var $rightBtn = $("#rightBtn");
	var $imgs = $("#imgs ul li");
	var $circles = $("#circles ol li");
	var $carousel = $("#carousel");
	// 定义length
	var length = $imgs.length;
	// 定义信号量
	var idx = 0;


	// 开启定时器
	var timer = setInterval(change, 2000);


	// 鼠标移入停止定时器
	$carousel.mouseenter(function() {
		// 清除定时器
		clearInterval(timer);
	})

	// 鼠标离开从新开启定时器
	$carousel.mouseleave(function() {
		// 设表先关
		clearInterval(timer);
		// 重新赋值timer
		timer = setInterval(change, 2000);
	})


	// 右按钮事件
	$rightBtn.click(change);

	function change() {
		// 防流氓
		if ($imgs.is(":animated")) {
			return;
		}
		// 当前图片消失
		$imgs.eq(idx).fadeOut(600);

		// 信号量改变
		idx++;
		// 边界判定
		if (idx > length - 1) {
			idx = 0;
		}

		// 下一张图片淡入
		$imgs.eq(idx).fadeIn(600);

		// 当前小圆点要加cur
		$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
	}

	// 左按钮事件
	$leftBtn.click(function() {
		// 防流氓
		if (!$imgs.is(":animated")) {

			// 当前图片消失
			$imgs.eq(idx).fadeOut(600);

			// 信号量改变
			idx--;

			// 边界判定
			if (idx < 0) {
				idx = length - 1;
			}

			// 下一张图片淡入
			$imgs.eq(idx).fadeIn(600);

			// 当前小圆点加cur
			$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
		}
	})



	// 小圆点事件
	$circles.mouseenter(function() {
		// 当前图片消失
		$imgs.eq(idx).stop(true).fadeOut(600);

		// 改变信号量
		idx = $(this).index();

		// 下一张图片出现
		$imgs.eq(idx).stop(true).fadeIn(600);

		// 当前小圆点加cur
		$(this).addClass("cur").siblings().removeClass("cur");
	})

	</script>
</body>
</html>

周帅帅Love

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
呼吸轮播图制作原理

呼吸轮播图轮播图：carousel呼吸轮播图变种布局重点：所有的图片摞一起。jquery选择元素的能力非常好，但是我们习惯将用到的元素，提前保存到变量。通常我们使用id选中元素。一般我们以$box。左右按钮防流氓的策略：当图片运动时，不进行任何操作。is()小圆点的防流氓的策略：立即响应新事件。stop(true)注意：使用代码时将图片更换，以及需要引入jquery库。举例：&lt...
复制链接

扫一扫