利用swiper依赖做轮播图-详细步骤

1.结构样式布局

 <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/1.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/2.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/3.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/4.jpg" alt="" /></a>
        </div>
      </div>
      <!-- 右边按钮 -->
      <div class="swiper-button-next"></div>
      <!-- 左边按钮 -->
      <div class="swiper-button-prev"></div>
      <!-- 下标小按钮圆点 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- Swiper JS -->
    <!-- 放在script上面 -->

2.样式布局

<style>
      html,
      body {
        position: relative;
        height: 100%;
      }
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      /* 是改变小圆点的背景颜色 */
      .swiper {
        width: 1226px;
        height: 460px;
        /* 第一种改变颜色 */
        --swiper-theme-color: #ffffff;
        /* 第二种改变颜色 */
        /* --swiper-pagination-color: #00ff33; 两种都可以 */
      }
      /* 左右按钮鼠标移入显示与隐藏  半透明 */
      .swiper .hide {
        opacity: 0;
      }
      /* 左右按钮半透明设置 */
      .swiper-button-next,
      .swiper-button-prev {
        transition: opacity 0.5s;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      /* 此处是改变下标小圆点的样式和颜色 */
      .swiper-pagination-bullet {
        background-color: #64cdbe;
        width: 45px;
        height: 5px;
        border-radius: 0;
        opacity: 1;
      }
      /* 此处是切换到小圆点变化的背景颜色 */
      .swiper-pagination-bullet-active {
        background: #fff;
      }
    </style>

3.js部分

 <script>
      //注意改动类名
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        //无限循环  自动播放
        autoplay: {
          delay: 2000,
          //点击小圆点 离开继续自动播放
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });

      swiper.el.onmouseover = function () {
        //鼠标移入自动播放停止
        swiper.autoplay.stop();
        //鼠标移入左右按钮显示与隐藏
        swiper.navigation.$nextEl.removeClass("hide");
        swiper.navigation.$prevEl.removeClass("hide");
      };
      swiper.el.onmouseout = function () {
        //鼠标移入自动播放停止
        swiper.autoplay.start();
        //鼠标移入左右按钮显示与隐藏
        swiper.navigation.$nextEl.addClass("hide");
        swiper.navigation.$prevEl.addClass("hide");
      };

      // 此方法是鼠标经过小圆点的时候,切换图片(方法一)
      //此方法为模拟的，hover到分页器的小圆点后自动触发其本身的click事件
      // $(".swiper-pagination-bullet").hover(function() {
      //     $(this).click(); //鼠标划上去之后，自动触发点击事件来模仿鼠标划上去的事件
      // },function() {
      //     mySwiper.autoplay.start(); //鼠标移出之后，自动轮播开启
      // })

      //鼠标经过下面小圆点图片切换图片(方法二)
      //鼠标滑过pagination控制swiper切换
      for (i = 0; i < swiper.pagination.bullets.length; i++) {
        swiper.pagination.bullets[i].index = i;
        swiper.pagination.bullets[i].onmouseover = function () {
          swiper.slideTo(this.index);
        };
      }
      //如果你开启了clickable，还可以这样
      for (i = 0; i < swiper.pagination.bullets.length; i++) {
        swiper.pagination.bullets[i].onmouseover = function () {
          this.click();
        };
      }
    </script>

最后-完整代码部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图插件使用案例</title>
    <link rel="stylesheet" href="../js基础+js高级/css/swiper-bundle.min.css" />
    <script src="../js基础+js高级/js/swiper-bundle.min.js"></script>
    <script src="../js基础+js高级/js/jQuery.min.js"></script>
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      /* 是改变小圆点的背景颜色 */
      .swiper {
        width: 1226px;
        height: 460px;
        /* 第一种改变颜色 */
        --swiper-theme-color: #ffffff;
        /* 第二种改变颜色 */
        /* --swiper-pagination-color: #00ff33; 两种都可以 */
      }
      /* 左右按钮鼠标移入显示与隐藏  半透明 */
      .swiper .hide {
        opacity: 0;
      }
      /* 左右按钮半透明设置 */
      .swiper-button-next,
      .swiper-button-prev {
        transition: opacity 0.5s;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      /* 此处是改变下标小圆点的样式和颜色 */
      .swiper-pagination-bullet {
        background-color: #64cdbe;
        width: 45px;
        height: 5px;
        border-radius: 0;
        opacity: 1;
      }
      /* 此处是切换到小圆点变化的背景颜色 */
      .swiper-pagination-bullet-active {
        background: #fff;
      }
    </style>
  </head>
  <body>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/1.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/2.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/3.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="../js基础+js高级/imgs/4.jpg" alt="" /></a>
        </div>
      </div>
      <!-- 右边按钮 -->
      <div class="swiper-button-next"></div>
      <!-- 左边按钮 -->
      <div class="swiper-button-prev"></div>
      <!-- 下标小按钮圆点 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- Swiper JS -->
    <!-- 放在script上面 -->
    <script>
      //注意改动类名
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        //无限循环  自动播放
        autoplay: {
          delay: 2000,
          //点击小圆点 离开继续自动播放
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });

      swiper.el.onmouseover = function () {
        //鼠标移入自动播放停止
        swiper.autoplay.stop();
        //鼠标移入左右按钮显示与隐藏
        swiper.navigation.$nextEl.removeClass("hide");
        swiper.navigation.$prevEl.removeClass("hide");
      };
      swiper.el.onmouseout = function () {
        //鼠标移入自动播放停止
        swiper.autoplay.start();
        //鼠标移入左右按钮显示与隐藏
        swiper.navigation.$nextEl.addClass("hide");
        swiper.navigation.$prevEl.addClass("hide");
      };

      // 此方法是鼠标经过小圆点的时候,切换图片(方法一)
      //此方法为模拟的，hover到分页器的小圆点后自动触发其本身的click事件
      // $(".swiper-pagination-bullet").hover(function() {
      //     $(this).click(); //鼠标划上去之后，自动触发点击事件来模仿鼠标划上去的事件
      // },function() {
      //     mySwiper.autoplay.start(); //鼠标移出之后，自动轮播开启
      // })

      //鼠标经过下面小圆点图片切换图片(方法二)
      //鼠标滑过pagination控制swiper切换
      for (i = 0; i < swiper.pagination.bullets.length; i++) {
        swiper.pagination.bullets[i].index = i;
        swiper.pagination.bullets[i].onmouseover = function () {
          swiper.slideTo(this.index);
        };
      }
      //如果你开启了clickable，还可以这样
      for (i = 0; i < swiper.pagination.bullets.length; i++) {
        swiper.pagination.bullets[i].onmouseover = function () {
          this.click();
        };
      }
    </script>
  </body>
</html>