间歇模型制作原理

最新推荐文章于 2025-05-16 03:45:00 发布

原创最新推荐文章于 2025-05-16 03:45:00 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#间歇模型制作

jquery 专栏收录该内容

9 篇文章

订阅专栏

间歇模型制作

编程思路：
使用定时器，我们要想使图片每2000ms更换一次，然后完成动画的时间是600ms，那么定时器的时间应该是它们的加和，所以应该是2600ms。
拉动的策略就是右按钮的策略。
Unit的高度要足够高并且要能够盛放3张图片。

举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		.carousel {
			width: 278px;
			height: 78px;
			margin: 50px auto;
			border: 3px solid #000;
			position: relative;
			overflow: hidden;
		}
		/* Unit的高度要足够高 并且要能够盛放3张图片 */
		.unit {
			position: absolute;
			top: 0;
			left: 0;
			width: 300px;
			height: 5000px;
		}
		.unit li {
			float: left;
			width: 78px;
			height: 78px;
			margin-right: 22px;
			margin-bottom: 12px;
		}
	</style>
</head>
<body>
	<div class="carousel" id="carousel">
		<ul class="unit" id="unit">
			<li><img src="images/mingxing/0.jpg" alt=""></li>
			<li><img src="images/mingxing/1.jpg" alt=""></li>
			<li><img src="images/mingxing/2.jpg" alt=""></li>
			<li><img src="images/mingxing/3.jpg" alt=""></li>
			<li><img src="images/mingxing/4.jpg" alt=""></li>
			<li><img src="images/mingxing/5.jpg" alt=""></li>
			<li><img src="images/mingxing/6.jpg" alt=""></li>
			<li><img src="images/mingxing/7.jpg" alt=""></li>
			<li><img src="images/mingxing/8.jpg" alt=""></li>
			<li><img src="images/mingxing/8.jpg" alt=""></li>
			<li><img src="images/mingxing/8.jpg" alt=""></li>
			<li><img src="images/mingxing/8.jpg" alt=""></li>
			<li><img src="images/mingxing/8.jpg" alt=""></li>
			<li><img src="images/mingxing/8.jpg" alt=""></li>
		</ul>
	</div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// 获取元素
	var $carousel = $("#carousel");
	var $unit = $("#unit");
	var length = $unit.children().length;
	// 定义一个信号量
	var idx = 0;

	// 补充空li保证每一行有三张图片
	if (length % 3 === 1) {
		// 补充两个空li
		$("<li></li><li></li>").appendTo($unit);
	} else if (length % 3 === 2) {
		// 补充一个li 
		$("<li></li>").appendTo($unit);
	}

	// 克隆第一行追加到unit的最后
	$unit.children("li:lt(3)").clone().appendTo($unit);

	// 定义定时器
	var timer = setInterval(rightBtn, 2600);

	// 定义一个函数，相当于右按钮事件
	function rightBtn() {
		// 拉动策略： 先拉动， 再瞬移
		idx++;
		// 再拉动
		$unit.animate({"top": -90 * idx}, 600, function() {
			console.log($unit.children().length)
			// 当猫腻图完全显示之后再验证信号量
			if (idx > $unit.children().length / 3 - 2) {
				// idx 归0
				idx = 0;
				// 瞬移到真图（第一行）
				$unit.css("top", 0);
			}
		})
	}
	
	</script>
</body>
</html>

提示：
1、回头我会把相关图片素材打包上传到我的资源中，你们可以注意下，可以下载下来使用，或者用自己的素材都可以
2、近几次发的实战案例，你们可以观察相同点和不同点，做出自己的思路和总结，这样相同的案例都可以采用同样的思路。
3、相关的js包我都已经上传到资料中，需要的同学可以下载使用。