下面土嘎嘎小编分享一个基本的 HTML 代码示例，用于实现三张图片的自动轮播：
〓〓html代码如下：〓〓
<!DOCTYPE html>
<html>
<head>
<title>图片自动轮播</title>
<style>
.slideshow-container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slideshow-container img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="slideshow-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var slides = document.getElementsByTagName("img");
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";
setTimeout(carousel, 2000); // 轮播间隔时间（以毫秒为单位）
}
</script>
</body>
</html>
在上面的示例中，我们使用了 CSS 定义了 .slideshow-container 类来创建一个容器，并设置了容器的宽度和高度。每个图片使用 <img> 标签嵌入，设置图片的宽度和高度为 100%。通过 JavaScript，我们定义了一个 carousel() 函数来实现轮播效果。
在 carousel() 函数中，我们首先隐藏所有的图片，然后根据 slideIndex 变量显示当前应该显示的图片。然后，递增 slideIndex 变量，并设置一个定时器（ setTimeout() ）来调用 carousel() 函数，以在指定时间间隔后进行下一次轮播。
土嘎嘎技术网友情提示：你需要将图片的路径替换为实际的图片路径，并根据需要调整样式和轮播间隔时间。