h5轮播图

HTML5 中有多种方式可以实现轮播图，以下是其中两种常用的方法：

1. 使用 CSS3 动画和 JavaScript 实现轮播图

HTML 代码：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

CSS 代码：

.slider {
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%;
  animation-name: slide;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.slides img {
  width: 33.333%;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

JavaScript 代码:

// 自动轮播
setInterval(() => {
  const slides = document.querySelector('.slides');
  slides.appendChild(slides.firstElementChild);
}, 2000);

2. 使用第三方库实现轮播图

使用第三方库可以更方便地实现轮播图，比如 `Swiper`、`Slick` 等。以 `Swiper` 为例，你可以在 HTML 中插入以下代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

在 JavaScript 中初始化 `Swiper`：

const mySwiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  autoplay: {
    delay: 2000,
    disableOnInteraction: false
  }
});