写一个轮播图的html代码片段包括css和js

以下是一个简单的轮播图的HTML代码片段，包括CSS和JS：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style>
		.slide {
			position: relative;
			width: 800px;
			height: 400px;
			overflow: hidden;
		}
		.slide ul {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.slide li {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}
		.slide li.active {
			opacity: 1;
		}
		.slide .btn {
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			display: flex;
		}
		.slide .btn button {
			width: 10px;
			height: 10px;
			margin-right: 10px;
			border: none;
			border-radius: 50%;
			background-color: #ccc;
			cursor: pointer;
			transition: background-color 0.2s ease-in-out;
		}
		.slide .btn button.active {
			background-color: #333;
		}
	</style>
</head>
<body>
	<div class="slide">
		<ul>
			<li class="active"><img src="image1.jpg" alt="image1"></li>
			<li><img src="image2.jpg" alt="image2"></li>
			<li><img src="image3.jpg" alt="image3"></li>
			<li><img src="image4.jpg" alt="image4"></li>
		</ul>
		<div class="btn">
			<button class="active"></button>
			<button></button>
			<button></button>
			<button></button>
		</div>
	</div>
	<script>
		let slideIndex = 0;
		const slides = document.querySelectorAll('.slide li');
		const btns = document.querySelectorAll('.slide .btn button');

		function init() {
			slides[0].classList.add('active');
			btns[0].classList.add('active');
			for (let i = 0; i < btns.length; i++) {
				btns[i].addEventListener('click', function() {
					changeSlide(i);
				});
			}
			setInterval(function() {
				changeSlide(slideIndex + 1);
			}, 5000);
		}

		function changeSlide(index) {
			slides[slideIndex].classList.remove('active');
			btns[slideIndex].classList.remove('active');
			slideIndex = (index + slides.length) % slides.length;
			slides[slideIndex].classList.add('active');
			btns[slideIndex].classList.add('active');
		}

		init();
	</script>
</body>
</html>

说明：

HTML部分：使用<ul>和<li>标签来实现图片轮播。每个<li>标签里包含一张图片。同时，添加了一个按钮组，用于手动切换图片。其中，第一个按钮默认为激活状态（即对应当前显示的图片）。
CSS部分：设置轮播图的基本样式，包括容器的大小、图片和按钮的样式等。
JS部分：实现轮播图的自动切换和手动切换。其中，changeSlide()函数用于切换图片和按钮的状态，init()函数用于初始化轮播图。在init()函数中，首先将第一张图片和第一个按钮设置为激活状态，然后为每个按钮添加点击事件，最后使用setInterval()定时器实现轮播图的自动切换