WEB前端——FOUR（图片轮播）

@DKX

已于 2024-02-01 14:35:00 修改

阅读量333

点赞数 8

文章标签：前端

于 2024-01-18 18:29:23 首次发布

本文链接：https://blog.csdn.net/qq_68600196/article/details/135681421

版权

案例实现：图片轮播

要求：

1，鼠标停止在图片上时，图片不轮播

2，点击左右切换箭头可以实现图片的手动切换

代码呈现：

<!DOCTYPE html>
<html>
	<head>
		<style>
			* {
				box-sizing: border-box;
			}

			.slide {
				display: none;
			}

			.active {
				display: block;
			}

			.prev,
			.next {
				cursor: pointer;
				position: absolute;
				top: 50%;
				width: auto;
				padding: 16px;
				margin-top: -22px;
				color: white;
				font-weight: bold;
				font-size: 18px;
				transition: 0.6s ease;
				border-radius: 0 3px 3px 0;
				user-select: none;
			}

			.next {
				right: 0;
				border-radius: 3px 0 0 3px;
			}

			.prev:hover,
			.next:hover {
				background-color: rgba(249, 13, 249, 0.8);
			}
		</style>
	</head>
	<body>
		<div style="max-width:500px; position:relative;">
			<div class="slide">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4c41272d-b81d-406b-82de-828bc9e00eaf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895249&t=e0f94ba91fa2c312e1b853a43fa157a8"
					style="width:100%">
			</div>

			<div class="slide">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F3f406081-97b5-498c-be9c-472e5541696a%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895125&t=994d3e36c61cb05bbe4461698d24f3cb"
					style="width:100%">
			</div>

			<div class="slide">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F580d7679-f84a-4d2c-b3e7-685b4498fbb9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895209&t=1f96a8e7a844f5fd75d19dea9bb3fd88"
					style="width:100%">
			</div>
			<div class="slide">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4d6d0aa2-5800-4111-a043-8f8cc2f91e01%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895285&t=e86d08bfe75233e7d17cf4a439234893"
					style="width:100%">
			</div>
			<div class="slide">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd413d626-5b43-4a2d-95f2-67b2bd615480%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895285&t=91a60bcafe616c4f5f58bbec36d56b63"
					style="width:100%">
			</div>
			<div class="slide">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F90d2d219-6394-40ce-ac23-77f858bb3b94%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707895285&t=028a7058a3e9fdfebce15b80ee245970"
					style="width:100%">
			</div>
			<!-- &#10094; 和 &#10095; 是HTML字符实体，分别是左箭头和右箭头。 -->
			<a class="prev" onclick="moveSlides(-1)">&#10094;</a>
			<a class="next" onclick="moveSlides(1)">&#10095;</a>
		</div>
		<script>
			var slideIndex = 1;
			var slides = document.getElementsByClassName("slide");
			var slideInterval = setInterval(showSlides, 1000); // Change image every 2 seconds

			function showSlides() {
				for (var i = 0; i < slides.length; i++) {
					slides[i].style.display = "none";
				}
				slideIndex++;
				if (slideIndex > slides.length) {
					slideIndex = 1
				}
				slides[slideIndex - 1].style.display = "block";
			}

			showSlides(slideIndex);

			function moveSlides(n) {
				clearInterval(slideInterval);
				slideIndex += n;
				if (slideIndex > slides.length) {
					slideIndex = 1
				}
				if (slideIndex < 1) {
					slideIndex = slides.length
				}
				for (var i = 0; i < slides.length; i++) {
					slides[i].style.display = "none";
				}
				slides[slideIndex - 1].style.display = "block";
				slideInterval = setInterval(showSlides, 2000); // reset timer
			}

			Array.from(slides).forEach(function(element) {
				element.onmouseover = function() {
					clearInterval(slideInterval);
				}
				element.onmouseout = function() {
					slideInterval = setInterval(showSlides, 2000);
				}
			});
		</script>
	</body>
</html>

视频呈现：

图片轮播