HTML图片自动轮播是一种常见的网页设计效果，通过自动切换图片的方式，给用户带来更好的浏览体验。下面是一个简单的HTML图片自动轮播的代码示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>图片自动轮播</title>
<style>
.slideshow-container {
position: relative;
max-width: 00%;
margin: auto;
}
.mySlides {
display: none;
}
.slideshow-container img {
width: 00%;
height: auto;
}
.prev,
.next {
position: absolute;
top: 0%;
transform: translateY(-0%);
color: white;
font-size: 16px;
font-weight: bold;
padding: px;
transition: 0.s ease;
border-radius: px;
cursor: pointer;
}
.prev {
left: px;
}
.next {
right: px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.);
}
.dot-container {
text-align: center;
padding: 0px;
background-color: rgba(0, 0, 0, 0.);
}
.dot {
display: inline-block;
width: 0px;
height: 0px;
margin: 0 px;
background-color: white;
border-radius: 0%;
transition: background-color 0.s ease;
cursor: pointer;
}
.active {
background-color: rgba(, , , 0.);
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<img src="image.jpg" alt="Image ">
</div>
<div class="mySlides">
<img src="image.jpg" alt="Image ">
</div>
<div class="mySlides">
<img src="image.jpg" alt="Image ">
</div>
<a class="prev" onclick="plusSlides(-)">❮</a>
<a class="next" onclick="plusSlides()">❯</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide()"></span>
<span class="dot" onclick="currentSlide()"></span>
<span class="dot" onclick="currentSlide()"></span>
</div>
<script>
var slideIndex = ;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = ;
}
if (n < ) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - ].style.display = "block";
dots[slideIndex - ].className += " active";
}
// 自动切换图片
setInterval(function() {
plusSlides();
}, 000);
</script>
</body>
</html>
```
上述代码中，我们使用了HTML、CSS和JavaScript来实现图片自动轮播效果。首先，我们定义了一个包含图片的容器，并使用CSS来设置容器的样式。然后，使用JavaScript来实现图片切换和自动切换功能。
在HTML部分，我们使用`<div>`元素来包含每张图片，并给每个`<div>`元素添加了`mySlides`类名。同时，我们使用`<a>`元素作为前进和后退按钮，并给它们分别添加了`prev`和`next`类名。
在CSS部分，我们设置了容器的样式，包括容器的位置、最大宽度和居中显示。同时，还设置了图片的样式，使其自适应容器的宽度。
在JavaScript部分，我们定义了一些函数来实现图片切换的功能。`plusSlides()`函数用于切换到前一张或后一张图片，`currentSlide()`函数用于切换到指定的图片。`showSlides()`函数用于显示当前的图片，并根据当前图片的索引值来设置前进和后退按钮的状态。
最后，我们使用`setInterval()`函数来实现自动切换图片的功能，每隔秒钟切换到下一张图片。
通过以上代码，我们可以实现一个简单的HTML图片自动轮播效果。你可以根据自己的需求修改代码，并添加更多的图片和样式来定制你想要的效果。希望对你有所帮助！