使用swiper.js插件实现简单的动画

1、首先引入css和js文件

 <link rel="stylesheet" href="./cssC/swiper-4.5.0.min.css"/>
 <script type="text/javascript" src="./script/swiper-4.5.0.min.js"></script>

2、根据需求编写样式和布局

图片css样式：

 /* 轮播 */
 .lunbo{
     width: 100%;
     height:5.7rem;
     cursor: pointer;
 }
 .lunbo img{
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

轮播html代码：

 <div class="swiper-container lunbo">
     <div class="swiper-wrapper" id="bannerList">
         <div class="swiper-slide" onclick="window.open('./recommentDetails.html')">
         	<img src="[https://b1-q.mafengwo.net/s16/M00/19/EF/CoUBUl6DJMGAWFe4ACR13B4-bt8760.png?imageMogr2%2Finterlace%2F1](https://b1-q.mafengwo.net/s16/M00/19/EF/CoUBUl6DJMGAWFe4ACR13B4-bt8760.png?imageMogr2/interlace/1)" alt="">
         </div>
         <div class="swiper-slide" onclick="window.open('./recommentDetails.html')">
         	<img src="[http://b1-q.mafengwo.net/s15/M00/55/42/CoUBGV31OMKAJYRyAA7X007gsCE55.jpeg?imageMogr2%2Fstrip](http://b1-q.mafengwo.net/s15/M00/55/42/CoUBGV31OMKAJYRyAA7X007gsCE55.jpeg?imageMogr2/strip)" alt="">
         </div>
         <div class="swiper-slide" onclick="window.open('./recommentDetails.html')">
         	<img src="[http://n1-q.mafengwo.net/s15/M00/83/CE/CoUBGV4PYT2AenxpABJu17BCfsw23.jpeg?imageMogr2%2Fstrip](http://n1-q.mafengwo.net/s15/M00/83/CE/CoUBGV4PYT2AenxpABJu17BCfsw23.jpeg?imageMogr2/strip)" alt="">
        </div>
     </div>
     <!-- 启用圆点分页器 -->
     <div class="swiper-pagination"></div>
     <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
     <div class="swiper-button-prev colorsprev"></div>
     <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
     <div class="swiper-button-next colorsprev"></div>
 </div>

3、得到Swiper实例，并配置相关参数

new Swiper('.swiper-container', {
	//启用无缝滚动，使Swiper看起来是循环的
    loop: true,
    //播放速度
    speed: 300,
    autoplay: {
    	//切换间隔时长
        delay: 3000
    },
    // 分页器（圆点）
    pagination: {
        el: '.swiper-pagination',
        clickable :true, //点击圆点切换
    },
    // 前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

效果如下