使用js生成代码轮播图

可以使用轮播插件轮播图，如swiper插件。以下是使用swiper插件生成轮播图的示例代码:

HTML代码:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="img1.jpg"/></div>
    <div class="swiper-slide"><img src="img2.jpg"/></div>
    <div class="swiper-slide"><img src="img3.jpg"/></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

JavaScript代码:

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

使用上述代码生成的轮播图可以自动轮播，并且鼠标悬停在轮播图上时会停止自动轮播，鼠标移开后会继续自动轮播。通过点击分页器可以切换轮播图，同时该轮播图支持无限循环，即最后一张轮播图切换到第一张时会重新开始循环。