swiper 自动图片无限轮播实现代码-前端开发

下面是详细的讲解。

下面是详细的讲解。

Swiper 自动图片无限轮播实现

Swiper 是一个基于 jQuery 的开源、免费的移动端触摸滑动插件，可以基于它实现图片无限轮播的效果。

具体步骤如下：

1. 引入 Swiper 库的 CSS和JS文件

在 HTML 文件的标签内引入 CSS 文件，在标签内引入 JS 文件。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

<body>
  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>

2. 构建 HTML 结构

需要给图片添加容器，并给每个图片添加一个单独的类，方便后面的控制。

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

3. 初始化 Swiper

在 JavaScript 文件中，使用以下代码初始化 Swiper，实现自动图片无限轮播功能：

var mySwiper = new Swiper('.swiper-container',{
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
})

在上面代码中，loop 设置为 true，则图片会在到达最后一张之后自动返回第一张，实现无限轮播。

autoplay 为自动播放设置，delay 为播放延迟时间，disableOnInteraction 为用户操作时是否停止自动播放。

示例1：Swiper 自动图片无限轮播实现

实现效果：给出三张图片进行自动无限轮播。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

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

  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container',{
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
    })
  </script>
</body>

示例2：多个Swiper实现自动无限轮播

实现效果：给出两个ID不同的Swiper，进行自动无限轮播。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>

<body>
  <!-- Swiper1 -->
  <div class="swiper-container" id="swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slide-img" src="image1.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image2.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image3.jpg">
      </div>
    </div>
  </div>

  <!-- Swiper2 -->
  <div class="swiper-container" id="swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slide-img" src="image4.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image5.jpg">
      </div>
      <div class="swiper-slide">
        <img class="slide-img" src="image6.jpg">
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
  <script>
    // Swiper1
    var swiper1 = new Swiper('#swiper1',{
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
    })

    // Swiper2
    var swiper2 = new Swiper('#swiper2',{
      loop: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
    })
  </script>
</body>

这两个 Swiper 分别为 swiper1 和 swiper2，分别完成自动无限轮播效果。其中，swiper1 的自动轮播时间为 3 秒，swiper2 的自动轮播时间为 2 秒。