h5 获取后台图片集合后实现轮播图

可以使用一些现成的轮播插件来实现，比如 Slick、Swiper 等。以下是一个使用 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 class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS 代码：

/* 设置轮播容器的宽度和高度 */
.swiper-container {
  width: 100%;
  height: 300px;
}

/* 设置轮播图片的宽度和高度 */
.swiper-slide img {
  width: 100%;
  height: 100%;
}

JavaScript 代码：

// 实例化 Swiper 对象
var swiper = new Swiper('.swiper-container', {
  // 设置轮播模式：水平轮播
  direction: 'horizontal',
  // 设置轮播速度，单位是毫秒
  speed: 1000,
  // 设置自动轮播，单位是毫秒
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  // 如果需要导航按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

需要注意的是，Swiper 可以自适应容器宽度，所以需要在 CSS 中设置轮播容器的宽度和高度。同时，轮播图片的宽度和高度需要设置为 100% 才能完全填充轮播容器。