html 手自动切换轮播图

HTML是网页的基础语言，无法直接实现手动或自动切换轮播图。但是，我们可以使用HTML结合CSS和JavaScript来实现手动或自动切换轮播图。

具体实现方式如下：
1. 在HTML中创建一个包含图片的容器，使用CSS设置该容器的宽度、高度和位置等样式。
2. 使用JavaScript创建一个计时器，每隔一定时间就切换下一张图片。
3. 当用户点击左右箭头时，可以通过JavaScript改变当前显示的图片，实现手动切换。

以下是一个简单的实现手动或自动切换轮播图的HTML、CSS和JavaScript代码示例：

HTML代码：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
  <div class="prev">上一张</div>
  <div class="next">下一张</div>
</div>

CSS代码：

.slider {
  position: relative;
  width: 600px;
  height: 300px;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}
.slider img.active {
  opacity: 1;
}
.slider .prev,
.slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,.5);
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.slider .prev {
  left: 0;
}
.slider .next {
  right: 0;
}

JavaScript代码：

var slider = document.querySelector('.slider');
var imgs = slider.querySelectorAll('img');
var prevBtn = slider.querySelector('.prev');
var nextBtn = slider.querySelector('.next');
var index = 0;

function showImg() {
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].classList.remove('active');
  }
  imgs[index].classList.add('active');
}

function prev() {
  index--;
  if (index < 0) {
    index = imgs.length - 1;
  }
  showImg();
}

function next() {
  index++;
  if (index >= imgs.length) {
    index = 0;
  }
  showImg();
}

prevBtn.addEventListener('click', prev);
nextBtn.addEventListener('click', next);

setInterval(function(){
  next();
},3000);

该示例中，我们首先使用CSS设置了图片容器的样式，使用JavaScript实现了自动切换和手动切换的功能。在JavaScript中，我们使用setInterval函数每隔3秒自动切换到下一张图片。当用户点击左右箭头时，我们通过JavaScript改变当前显示的图片。