js引入swiper轮播插件

html页面引入swiper的css和js。（具体版本可自行去官网找寻）
https://www.swiper.com.cn/

js部分：swiper为3.4.2版本

<script src="js/swiper.min.js"></script>
<script src="js/jquery-1.8.3.js"></script>
<script>
    /* 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();
    })
    
</script>

html部分

   <div class="swiper-container">
              <div class="swiper-wrapper">
                      <div class="swiper-slide">
                            <img src="http://files.cailiao.com/vue/cailiao/pc_21/images/ba1.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://files.cailiao.com/vue/cailiao/pc_21/images/ba2.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://files.cailiao.com/vue/cailiao/pc_21/images/ba3.png" alt="">
                        </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
   </div>

PC效果图

轮播图.png

唯唯诺诺工作，兢兢业业加班