三位置法实现无缝滚动轮播图

最新推荐文章于 2021-01-15 15:28:38 发布

周帅帅Love

最新推荐文章于 2021-01-15 15:28:38 发布

阅读量404

点赞数

分类专栏： jquery 文章标签：三位置法实现无缝滚动轮播图

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

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

三位置法实现无缝滚动轮播图

三位置：候场位置、登场位置、退场位置
缺点：虽然可以实现无缝轮播图，但是有一个缺点就是当鼠标在小圆点中来回滑动时，会显示出现空白现象，所以一般实现滚动轮播图都实现我上篇文章的滚动轮播图的方法

注意：举例中所引入的jquery包可以去我上传的资料中下载，里面有相关包及手册，我使用的jquery的包版本是jquery-1.12.3.min.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;
		}
		/*候场位置: left: 560*/
		 .carousel .unit li {
		 	position: absolute;
		 	left: 560px;
		 	width: 560px;
		 	height: 300px;
		 }
		 /*登场位置: left: 0*/
		 .carousel .unit li:first-child {
		 	left: 0px;
		 }
		 /*退场位置*/
		 .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 $imgs = $("#unit li");
	var $circles = $("#circles ol li");
	var $leftBtn = $("#leftBtn");
	var $rightBtn = $("#rightBtn");
	var length = $circles.length;

	// 定义信号量
	var idx = 0;

	// 右按钮事件
	$rightBtn.click(function() {
		// 防流氓
		if ($imgs.is(":animated")) {
			return;
		}
		// 当前图片退场
		$imgs.eq(idx).animate({"left": -560}, 600);
		// 信号量改变
		idx++;
		// 边界判定
		if (idx > length - 1) {
			idx = 0;
		}
		// 下一张图片先去到候场位置再动画进入
		$imgs.eq(idx).css("left", 560).animate({"left": 0}, 600);
		// 小圆点事件
		$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
	})


	// 左按钮事件
	$leftBtn.click(function() {
		// 防流氓
		if ($imgs.is(":animated")) {
			return;
		}
		// 当前图片退场
		$imgs.eq(idx).animate({"left": 560}, 600);

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

		// 下一张图片先瞬移到left: -560位置然后再登场
		$imgs.eq(idx).css("left", -560).animate({"left": 0}, 600);

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



	// 小圆点事件
	$circles.mouseenter(function() {
		// 定义一个变量用于保存触发事件的序号，与当前信号量做比较
		var i = $(this).index();
		// console.log(i);
		if (i > idx) {
			// 此时等价于右按钮事件，图片应该从右边进入
			// 当前图片退场
			$imgs.eq(idx).stop(true).animate({"left": -560}, 600);
			// 信号量改变
			idx = i;
			// 新图从候场位置left: 560的位置登场
			$imgs.eq(idx).stop(true).css("left", 560).animate({"left": 0}, 600);
		} else if (i < idx) {
			// 等价于左按钮事件， 图片应该从左边进入
			// 当前图片退场
			$imgs.eq(idx).stop(true).animate({"left": 560}, 600);
			// 信号量改变
			idx = i;
			// 新图从候场位置left: -560的位置登场
			$imgs.eq(idx).stop(true).css("left", -560).animate({"left": 0}, 600);
		}
		// 小圆点加cur
		$(this).addClass("cur").siblings().removeClass("cur");
	})

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

使用事项：
1、图片更换自己所需要的图片
2、注意引入jquery包的路径和版本问题。
3、相比我写的两篇关于滚动轮播图的文章，发现各自的缺点。（滚动轮播图缺点：当鼠标从第一个小圆点移入最后一个小圆点的过程中，会显示经过的图片，这个可以看淘宝这个大网站也是使用的这个方法。无缝轮播图的缺点：虽然解决了滚动轮播图的缺点，但是引入一个更大的问题，就是当鼠标在小圆点上来回移动，会发现空白现象，所以相比较淘宝这种大网站，我更推荐你们使用我上篇文章中的滚动轮播图这个案例）
4、你们遇到问题和建议，欢迎随时留言，如果觉得不错的同学，可以关注下，每天都会写各种知识点和案例供大家学习，谢谢。

周帅帅Love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三位置法实现无缝滚动轮播图

三位置法实现无缝滚动轮播图三位置：候场位置、登场位置、退场位置缺点：虽然可以实现无缝轮播图，但是有一个缺点就是当鼠标在小圆点中来回滑动时，会显示出现空白现象，所以一般实现滚动轮播图都实现我上篇文章的滚动轮播图的方法注意：举例中所引入的jquery包可以去我上传的资料中下载，里面有相关包及手册，我使用的jquery的包版本是jquery-1.12.3.min.js举例：&lt;!DOCTY...
复制链接

扫一扫