基于swiper库，实现swiper2.X 淡入淡出的轮播效果

前言

由于这次项目中需要使用轮播图，并且要求项目的兼容性要尽量友好，所以我选择使用swiper2.x的版本。官网自带的默认轮播效果为无缝滚动轮播，而我这个项目需求是淡入淡出的效果。swiper3.X是有这个效果的，而swiper2.X需要自己实现。而我发现网上对实现此效果的相关文章少之又少，于是写下我的代码，以供有需要的朋友参考，大佬自动忽略.....hahaha

代码如下

1.首先需要引入swiper库 与 可以设置轮播效果的插件

    <script src="idangerous.swiper2.7.6.min.js"></script>
    <script src="idangerous.swiper.progress.min.js"></script>

2.创建swiper实例，并启动插件（注释详解）

    var mySwiper1 = new Swiper('.swiper-container', {
    autoplay: 5000,
    loop: true,
    pagination: '.pagination',
    paginationClickable: true,
    initialSlide :0,
    observer:true,
    observeParents:true,
    //设定progress参数为true时启用 Smooth Progress 插件
    progress:true, 
    //启用 Smooth Progress 插件后会增加一个回调函数onProgressChange
    onProgressChange: function(swiper){    
    //插件会在每个slide上面增加一个progress属性，同时在swiper也增加一个property属性
        for (var i = 0; i < swiper.slides.length; i++){    
          var slide = swiper.slides[i]; 
          //根据slide的progress属性实现某些效果
          var progress = slide.progress;    
          var translate = progress*swiper.width;      
          var opacity = 1 - Math.min(Math.abs(progress),1);    
          slide.style.opacity = opacity;    
          swiper.setTransform(slide,'translate3d('+translate+'px,0,0)');    
        }    
      },    
      //swiper的回调函数  当碰触到slider时执行
      onTouchStart:function(swiper){    
        for (var i = 0; i < swiper.slides.length; i++){    
          swiper.setTransition(swiper.slides[i], 0);    
        }    
      },    
      //swiper的回调函数  每次当Swiper开始动画时执行，常用于Swiper Smooth Progress插件
      onSetWrapperTransition: function(swiper, speed) {    
        for (var i = 0; i < swiper.slides.length; i++){    
          swiper.setTransition(swiper.slides[i], speed);    
        }    
      }    
});