html页面引入swiper的css和js。(具体版本可自行去官网找寻)
https://www.swiper.com.cn/
js部分:swiper为3.4.2版本
/* swiper轮播组件 */
var swiper = new Swiper('.swiper-container', {
effect: 'fade',//控制轮播图的切换效果
prevButton: '.swiper-button-prev',//上一张
nextButton: '.swiper-button-next',//下一张
loop: true,//循环播放
pagination: '.swiper-pagination',//轮播下方小圆点
paginationClickable: true,//下方小圆点可点击
autoplay: 2000,//自动播放
});
/*鼠标移入停止轮播,鼠标离开 继续轮播*/
$('.swiper-container').mouseenter(function () {
swiper.stopAutoplay();
}).mouseleave(function () {
swiper.startAutoplay();
})
html部分
PC效果图
轮播图.png
唯唯诺诺工作,兢兢业业加班