普歌-知希团队：如何使用swiper插件实现轮播图自动播放（亲测有效）

一、swiper配置选项地址

从这里打开 https://www.swiper.com.cn/api/thumbs/2018/0916/432.html

或者直接搜索 swiper_Swiper参数选项

二、使用步骤

1.找到配置选项中的组件

2.点击自动切换（autoplay)

3.找到其中的mySwiper.autoplay.stop()

三.查看 使用方法示例

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  autoplay : true,
})

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

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

四.引入

注意!!!
这里引入的js和flexible都要放到 /body 的上面，所有html代码的底下，位置如下

</div>
    <script src="js/flexible.js">
    </script>
    <!-- 引入js文件 -->
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'progressbar',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 2000,
            } //1000，即1秒切换一次
        });
        // 鼠标停留停止切换
        mySwiper.el.onmouseover = function() {
            mySwiper.autoplay.stop();
        }

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

</html>