js 轮播图-CSDN博客

本文链接：https://blog.csdn.net/m0_52484611/article/details/121707394

思路：

对左右两个按钮分别设置监听，克隆第一张图片并放置最后，切换至最后一张时，使用延时器将其瞬间拉直第一张图片的位置。反向切换时，由第一张瞬间移动至克隆的图片上，在设置一个0ms的延时器，使过渡效果失效。最后使用函数节流防止点击过快时导致的切换速度加快现象。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.carousel {
			width: 700px;
			height: 560px;
			border: 1px solid #000;
			margin: 50px auto;
			position: relative;
			overflow: hidden;
		}

		ul {
			list-style: none;
			width: 6000px;
			position: relative;
			left: 0;
			transition: left .6s ease 0s;

		}

		li {
			float: left;
		}

		.leftbtn {
			position: absolute;
			left: 20px;
			top: 50%;
			margin-top: -30px;
			width: 60px;
			height: 60px;
			background-color: palevioletred;
			border-radius: 50%;
		}

		.rightbtn {
			position: absolute;
			right: 20px;
			top: 50%;
			margin-top: -30px;
			width: 60px;
			height: 60px;
			background-color: palevioletred;
			border-radius: 50%;
		}
	</style>
</head>

<body>
	<div class="carousel">
		<ul>
			<li><img src="images/路飞.jpg" alt=""></li>
			<li><img src="images/缇娜.jpg" alt=""></li>
			<li><img src="images/多米诺.jpg" alt=""></li>
			<li><img src="images/小萨蒂.jpg" alt=""></li>
			<li><img src="images/达丝琪.jpg" alt=""></li>
		</ul>
		<a href="javascript:;" class="leftbtn" id="leftbtn"></a>
		<a href="javascript:;" class="rightbtn" id="rightbtn"></a>
	</div>
	<script>
		// 得到按钮和ul
		var ul = document.getElementsByTagName('ul')[0];
		var leftbtn = document.getElementById('leftbtn');
		var rightbtn = document.getElementById('rightbtn');

		// 克隆第一张图片
		var cloneli = ul.firstElementChild.cloneNode(true);
		ul.appendChild(cloneli);

		// 当前ul显示到第几张了，从0开始数
		var idx = 0;

		// 节流锁
		var lock = true;

		// 右边按钮监听
		rightbtn.onclick = function () {
			// 判断锁的状态
			if (!lock) return;

			lock = false;

			// 给list加过渡，因为最后一张图片会把过渡去掉
			ul.style.transition = 'left .6s ease 0s'
			idx++;
			if (idx > 4) {
				// 设置一个延时器，延时器的功能就是将ul瞬间拉回0的位置，延时器的目的就是让过渡动画结束之后
				// 取消掉过渡，因为要的是瞬间移动，不是有过渡动画的回去
				setTimeout(function () {
					ul.style.transition = 'none';
					ul.style.left = 0;
					idx = 0;
				}, 500);

			}
			ul.style.left = -idx * 700 + 'px';

			// 函数节流
			setTimeout(function () {
				lock = true;
			}, 500);
		}

		// 左边按钮监听
		leftbtn.onclick = function () {
			if (!lock) return;

			lock = false;

			// 判断是不是第0张，如果是，就要瞬间用克隆的替换原本的
			if (idx == 0) {
				// 取消掉过渡，因为要的是瞬间移动，不是有过渡动画的回去
				ul.style.transition = 'none';
				// 直接瞬间移动到最后的克隆的图片上
				ul.style.left = -5 * 700 + 'px';
				// 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上过渡
				setTimeout(function () {
					// 加过渡
					ul.style.transition = 'left .6s ease 0s'
					// idx改为真正的最后一张
					idx = 4;
					ul.style.left = -idx * 700 + 'px';
				}, 0);
			} else {
				idx--;
				ul.style.left = -idx * 700 + 'px';
			}

			// 函数节流
			setTimeout(function () {
				lock = true;
			}, 500);
		}
	</script>
</body>

</html>