https://www.swiper.com.cn/ Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>基于swiper实现</title>
  8.     <!-- IMPORT CSS -->
  9.     <link rel="stylesheet" href="css/reset.min.css">
  10.     <link rel="stylesheet" href="css/swiper-bundle.min.css">
  11.     <style>
  12.         .swiper-container {
  13.             width: 1000px;
  14.             height: 400px;
  15.         }
  17.         .swiper-slide img {
  18.             display: block;
  19.             width: 100%;
  20.             height: 100%;
  21.         }
  23.         /* 自定义样式：看到插件生成的样式类和样式，我们自己按照样式类名去修改 如果想让我们自己写的样式权重最高 
  24.         则设置 !important*/
  25.         .swiper-pagination .swiper-pagination-bullet{
  26.             width: 12px;
  27.             height: 12px;
  28.         } 
  29.         .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  30.             background: red !important;
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="swiper-container" id="container1">
  37.         <!-- 轮播图 -->
  38.         <div class="swiper-wrapper">
  39.             <div class="swiper-slide">
  40.                 <img src="images/banner01.png" alt="">
  41.             </div>
  42.             <div class="swiper-slide">
  43.                 <img src="images/banner02.jpg" alt="">
  44.             </div>
  45.             <div class="swiper-slide">
  46.                 <img src="images/banner03.png" alt="">
  47.             </div>
  48.             <div class="swiper-slide">
  49.                 <img src="images/banner04.png" alt="">
  50.             </div>
  51.             <div class="swiper-slide">
  52.                 <img src="images/banner05.png" alt="">
  53.             </div>
  54.         </div>
  55.         <!-- 分页器 -->
  56.         <div class="swiper-pagination"></div>
  58.         <!-- 导航按钮 -->
  59.         <div class="swiper-button-prev"></div>
  60.         <div class="swiper-button-next"></div>
  61.     </div>
  62.     <!-- IMPORT JS -->
  63.     <script src="js/swiper-bundle.min.js"></script>
  64.     <script src="js/index.js"></script>
  65. </body>
  67. </html>

JS

let sw1 = new Swiper('#container1', {
    //基础配置
    // initialSlide: 2, //默认0 设定初始化时slide的索引[跟克隆的索引无关 显示的真实的索引]
    direction: 'horizontal', // 水平切换选项 horizontal[水平] vertical[垂直]
    speed: 300,//每一次切换的动画时间 300ms
    //grabCursor: true,//放上去有手指
    loop: true, // 开启循环切换[左右运动实现无缝衔接] 注意索引因为克隆两张的原因，发生改变了
    effect:'fade',//切换效果：slide[位移] fade[淡入] cube[方块] coverflow[实现3D流] flip翻转
    // 自动轮播=======
    autoplay: {
        delay: 3000, //间隔多长时间切换一次
        stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
       //
        disableOnInteraction: false
    },
    //分页器
    pagination: {
        el: '.swiper-pagination',
        //type:'bullets' //bullets[圆点默认]  bullets[分式] progressbar[进度条]
        clickable: true //点击分页器的指示点分页器会控制Swiper切换
    },
    // 前进后退按钮
    navigation: {
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next'
    },

    // 事件监听【回调函数】
    on:{
        //swiper当前创造的这个类的实例
        init(swiper){ 
            console.log('初始化完成');
        },
        transitionEnd(swiper){
            //swiper属性
            let {activeIndex,realIndex,slides} =swiper;
            //activeIndex 包含克隆的索引
            //realIndex 真实的索引
            //slides 显示的轮播图
            console.log('切换完成',activeIndex,realIndex,slides);
        }
    }

});

//自己控制鼠标进入/离开容器，同时管控自动轮播的暂停和继续
let container=document.querySelector('#container1');
container.addEventListener('mouseenter',()=> sw1.autoplay.stop());
container.addEventListener('mouseleave',()=> sw1.autoplay.start());