html5图片自动轮播

要实现HTML5图片自动轮播，可以使用HTML5、CSS3和JavaScript技术，具体步骤如下：

1. 创建HTML结构，包括图片容器和导航点容器。

2. 使用CSS3设置图片容器的样式，包括宽度、高度、定位和过渡效果等。

3. 使用JavaScript编写轮播逻辑，包括定时器、图片切换和导航点切换等。

4. 将JavaScript代码添加到HTML页面中，启动轮播功能。

以下是一个基本的HTML5图片自动轮播示例代码：

<div class="slider">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
  <div class="nav-dots">
    <span class="nav-dot"></span>
    <span class="nav-dot"></span>
    <span class="nav-dot"></span>
  </div>
</div>

.slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.nav-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.nav-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: gray;
  border-radius: 50%;
  cursor: pointer;
}

.nav-dot.active {
  background-color: white;
}

var slider = document.querySelector('.slider');
var sliderImgs = slider.querySelectorAll('img');
var sliderDots = slider.querySelectorAll('.nav-dot');
var current = 0;

function nextSlide() {
  sliderImgs[current].classList.remove('active');
  sliderDots[current].classList.remove('active');
  current = (current + 1) % sliderImgs.length;
  sliderImgs[current].classList.add('active');
  sliderDots[current].classList.add('active');
}

setInterval(nextSlide, 5000);

在这个示例中，使用CSS3设置了图片容器的样式和过渡效果，使用JavaScript编写了轮播逻辑，并使用定时器每隔5秒自动切换图片。导航点容器用于显示当前图片的序号，方便用户进行手动切换。