js之简单轮播图

news2024/11/16 23:49:40

今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>走马灯示例</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f9f9f9;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				margin: 0;
			}

			.carousel-container {
				position: relative;
				width: 80%;
				max-width: 600px;
				overflow: hidden;
				border-radius: 10px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}

			.carousel {
				display: flex;
				transition: transform 0.5s ease;
			}

			.carousel-item {
				min-width: 100%;
				box-sizing: border-box;
				padding: 20px;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 10px;
				text-align: center;
			}

			.carousel-button {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background-color: rgba(0, 0, 0, 0.5);
				border: none;
				color: #fff;
				padding: 10px;
				cursor: pointer;
				border-radius: 50%;
				font-size: 18px;
			}

			.carousel-button.prev {
				left: 10px;
			}

			.carousel-button.next {
				right: 10px;
			}

			.carousel-button:hover {
				background-color: rgba(0, 0, 0, 0.7);
			}
		</style>
	</head>
	<body>
		<div class="carousel-container">
			<div class="carousel">
				<div class="carousel-item">项目 1</div>
				<div class="carousel-item">项目 2</div>
				<div class="carousel-item">项目 3</div>
				<div class="carousel-item">项目 4</div>
				<div class="carousel-item">项目 5</div>
			</div>
			<button class="carousel-button prev" onclick="prevSlide()">&#10094;</button>
			<button class="carousel-button next" onclick="nextSlide()">&#10095;</button>
		</div>

		<script>
			var currentIndex = 0;

			function showSlide(index) {
				var carousel = document.querySelector('.carousel');
				var items = document.querySelectorAll('.carousel-item');
				var totalItems = items.length;
				if (index >= totalItems) {
					currentIndex = 0;
				} else if (index < 0) {
					currentIndex = totalItems - 1;
				} else {
					currentIndex = index;
				}
				var offset = -currentIndex * 100;
				carousel.style.transform = 'translateX(' + offset + '%)';
			}

			function nextSlide() {
				showSlide(currentIndex + 1);
			}

			function prevSlide() {
				showSlide(currentIndex - 1);
			}

			// 自动播放功能
			setInterval(function() {
				nextSlide();
			}, 3000); // 每3秒切换一次
		</script>
	</body>
</html>