【JQuery】实现无缝轮播图

最新推荐文章于 2022-06-28 20:13:35 发布

SEVLT

最新推荐文章于 2022-06-28 20:13:35 发布

阅读量268

点赞数

分类专栏： JQuery 文章标签： jquery css3 html5 javascript

本文链接：https://blog.csdn.net/sunqi568/article/details/105620362

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果预览：https://sevlt.github.io/slideshow/index.html

特点：页面失焦时暂停轮播。

HTML 代码：

<!DOCTYPE html>
<html lang="zh-Hans">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./style.css" />
		<title>无缝轮播</title>
	</head>
	<body>
		<div class="window">
			<div class="imga">
				<img src="1.png" alt="图片1" class="current" />
				<img src="2.png" alt="图片2" class="enter" />
				<img src="3.png" alt="图片3" class="enter" />
				<img src="4.png" alt="图片4" class="enter" />
				<img src="5.png" alt="图片5" class="enter" />
			</div>
		</div>

		<script src="jquery-3.2.1.min.js"></script>
		<script src="main.js"></script>
	</body>
</html>

CSS 代码：

* {
	box-sizing: border-box;
}

.window {
	width: 400px;
	height: 300px;
	margin: 100px auto;
	overflow: hidden;
	border-radius: 10px;
}

.window .imga {
	position: relative;
}

.window .imga img {
	position: absolute;
	top: 0;
	width: 100%;
	transition: all 0.5s; /* 动画 0.5 秒完成 */
}

.window .imga img.current {
	transform: translateX(0);
	z-index: 1; /* 当前轮播图保持在最上面 */
}

.window .imga img.leave {
	transform: translateX(-100%); /* 沿 x 轴反向偏移 100% */
}

.window .imga img.enter {
	transform: translateX(100%); /* 沿 x 轴偏移 100% */
}

JavaScript 代码：

var n = 1;
var timer = null;
//为了避免切换标签页产生“动画积累”问题，使用以下方法：
//即页面加载和 onfocus 开始计时器，页面 onblur 清除计时器
window.onload = function () {
	this.slide();
};
window.onfocus = function () {
	this.slide();
};
window.onblur = function () {
	clearInterval(timer);
};
function slide() {
	timer = setInterval(() => {
		$(`.window .imga img:nth-child(${num(n)})`) /* 字符串插值法插入num(n) */
			.removeClass('current')
			.addClass('leave')
			// 当前页面进入 leave 状态后，再切换到enter状态（“transitionend” 表示之前效果完成后再执行）
			// 且仅执行一次，因此此处为 one() 而不是 on()，若使用 on() 则会在第二次轮播出现 BUG
			.one('transitionend', (e) => {
				$(e.currentTarget).removeClass('leave').addClass('enter');
			});
		$(`.window .imga img:nth-child(${num(n + 1)})`)
			.removeClass('enter')
			.addClass('current');
		n += 1;
	}, 3000);
}

/* n 的取值始终为 1-5 */
function num(n) {
	if (n > 5) {
		n = n % 5;
		if (n === 0) {
			n = 5;
		}
	}
	return n;
}

SEVLT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】实现无缝轮播图

特点：页面失焦时暂停轮播。HTML 代码：<!DOCTYPE html><html lang="zh-Hans"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
复制链接

扫一扫