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

文章目录

• 一、swiper配置选项地址
• 二、使用步骤
• • • • • 1.找到配置选项中的组件
        • 2.点击自动切换（autoplay)
        • 3.找到其中的mySwiper.autoplay.stop()
• 三.查看 使用方法示例
• 四.引入

一、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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！