滚动轮播图制作原理

滚动轮播图

滚动轮播图布局关键：是所有图片并排在一起，所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略：先拉动，再瞬移
左按钮拉动策略：先瞬移，再拉动
与呼吸轮播图一样，需要做防流氓策略

复制代码：将我代码中的图片更换为你的图片，注意图片路径，还需要引入js库，我引入的是jquery-1.12.3.min.js的版本，需要js这个库的同学可以去我上传的资料中下载，引入的时候注意路径

举例：

<!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;
		}
		a {
			text-decoration: none;
		}
		.carousel {
			width: 560px;
			height: 300px;
			margin: 50px auto;
			border: 5px solid red;
			position: relative;
			overflow: hidden;
		}
		/* 滚动轮播图布局关键，是所有图片并排在一起
			unit的宽要足够宽
		 */
		 .carousel .unit {
		 	position: absolute;
		 	width: 9999px;
		 	left: 0;
		 	top: 0;
		 }
		 .carousel .unit li {
		 	float: left;
		 	width: 560px;
		 	height: 300px;
		 }
		 .btns a {
		 	position: absolute;
		 	width: 30px;
		 	height: 60px;
		 	top: 50%;
		 	margin-top: -30px;
		 	background-color: rgba(0, 0, 0, .5);
		 	color: #fff;
		 	font-size: 20px;
		 	line-height: 60px;
		 	text-align: center;
		 }
		 .btns a:first-child {
		 	left: 10px;
		 }
		 .btns a:last-child {
		 	right: 10px;
		 }
		 .circles {
		 	position: absolute;
		 	width: 140px;
		 	height: 20px;
		 	left: 50%;
		 	margin-left: -70px;
		 	bottom: 30px;
		 }
		 .circles ol {
		 	width: 150px;
		 }
		 .circles ol li {
		 	float: left;
		 	width: 20px;
		 	height: 20px;
		 	margin-right: 10px;
		 	background-color: orange;
		 	border-radius: 50%;
		 }
		 .circles ol li.cur {
		 	background-color: yellow;
		 }
	</style>
</head>
<body>
	<div class="carousel" id="carousel">
		<ul class="unit" id="unit">
			<li><img src="images/0.jpg" alt=""></li>
			<li><img src="images/1.jpg" alt=""></li>
			<li><img src="images/2.jpg" alt=""></li>
			<li><img src="images/3.jpg" alt=""></li>
			<li><img src="images/4.jpg" alt=""></li>
		</ul>
		<div class="btns">
			<a href="javascript:void(0)" id="leftBtn">&lt;</a>
			<a href="javascript:void(0)" id="rightBtn">&gt;</a>
		</div>
		<div class="circles" id="circles">
			<ol>
				<li class="cur"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 获取元素
	var $unit = $("#unit");
	var $leftBtn = $("#leftBtn");
	var $rightBtn = $("#rightBtn");
	var $circles = $("#circles ol li");
	var length = $circles.length;
	// console.log(length);

	// 定义信号量 有效范围: 0, 1, 2, 3, 4
	var idx = 0;

	// 克隆第一张图片追加到最后一张
	$unit.children("li:first").clone().appendTo($unit);

	// 右按钮的点击事件
	$rightBtn.click(function() {
		// 防流氓
		if ($unit.is(":animated")) {
			return;
		}
		// 拉动策略: 先拉动， 再瞬移
		idx++;
		console.log(idx);
		// 信号量 有效值是: 0, 1, 2, 3, 4, 5(5是猫腻图)
		$unit.animate({"left": -560 * idx}, 1000, function() {
			// 当猫腻图完全显示之后验证信号量
			if (idx > length - 1) {
				// idx 归零
				idx = 0;
				// 瞬间移动到真图
				$unit.css("left", 0);
			}

		})
		// 小圆点在1000ms之内，对应的是idx = 5 是猫腻图
		// 0 - 4 是有效值， 5对应的是猫腻图
		// 定义一个变量用于中转信号量
		var i = idx <= 4 ? idx : 0;
		$circles.eq(i).addClass("cur").siblings().removeClass("cur");

	})


	// 左按钮点击事件
	$leftBtn.click(function() {
		// 防流氓
		if ($unit.is(":animated")) {
			return;
		}

		// 左按钮的拉动策略: 先瞬移， 再拉动
		idx--;
		// 边界判断
		if (idx < 0) {
			idx = length - 1;
			// 瞬间移动到猫腻图
			$unit.css("left", -560 * length);
		}
		console.log(idx);
		// 拉动
		$unit.animate({"left": -560 * idx}, 1000);

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

	// 小圆点事件
	$circles.mouseenter(function() {
		// 改变信号量
		idx = $(this).index();
		console.log(idx);
		// 拉动
		$unit.stop(true).animate({"left": -560 * idx}, 600);
		// 小圆点加cur
		$(this).addClass("cur").siblings().removeClass("cur");
	})


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

滚动轮播图制作原理

滚动轮播图

猜你喜欢