JS---使用swiper制作移动端轮播图

1. 进入官网下载swiper插件

   插件下载地址
   

2. 加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件

    <!-- 引入swipercss文件 -->
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <!-- 引入swiper js 文件 -->
    <script src="swiper/swiper-bundle.min.js"></script>

html内容：

从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<!-- <div class="swiper-container"> -->
<!-- 改为: -->
<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

3. 查看官网API文档，解锁更多功能。

   Swiper官方API文档

window.onload = function() {
    var mySwiper = new Swiper('.swiper', {
        //环形切换关闭
        loop: true,
        // 切换的速度
        speed: 800, //滑动或者自动换页时的速度
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            // type: 'fraction',
            // type: 'progressbar',
            // type: 'custom',
        },
        autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },

    });
    //鼠标覆盖停止自动切换
    mySwiper.el.onmouseover = function() {
        mySwiper.autoplay.stop();
    }

    //鼠标离开开始自动切换
    mySwiper.el.onmouseout = function() {
        mySwiper.autoplay.start();
    }

}