移动端处理触控滑块的js框架

序

今天主要讲解一款移动端轻量级的，主要处理移动设备触控滑块的js框架；简单点就是在屏幕上滑动的时候的交互处理。它的名字叫Swiper。
官方介绍说是为ios设计的，但是在安卓，wp 和pc端也有良好的用户体验。目前了解到的主要应用于移动端，不管是ios还是安卓，但是pc可能支持不好，最新的高级浏览器是没问题的，但是鉴于对低版本以及一些较新浏览器的部分支持，所以pc端还是不要用的好。

优点:

• 1.简单好用
• 2.横跨多种设备 ios、安卓、wp、pc
• 3.多种版本支持（原生，jquery，zepto）;即调用代码写在原生js或是jquery，zepto里都是可以的

ps:

Swiper现在已经发展到3.X系列，最新的版本已经不再全面支持PC端的浏览器，如果要更好地兼容性，需要使用2.X版本。（可以从IE7+开始进行支持）

使用说明：也是3步走策略

1.引入文件
     <link rel="stylesheet" href=“css/swiper.min.css">
     <script src=“js/swiper.min.js"></script>
2.HTML结构
<divclass="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">你的展示内容</div>
       <div class="swiper-slide">你的展示内容</div>
       <div class="swiper-slide">你的展示内容</div>
   </div>
</div>
3.Js文件调用
var swiper = newSwiper('.swiper-container');

ps： html中的三层结构你不能随意进行修改，内容展示内嵌在.swiper-slide即可；不过你要是顾虑为了标签语义结构的优化替换成ul>li，即ul类名叫swiper-slide；展示内容放在li里，但是大多移动端又不太在意语义的处理，所以不要有此顾略了。放心大胆的用吧，尽管满世界的div.修改自带的样式的话可以单独添加类名进行控制！！不要修改源文件，要不挺没礼貌的。呵呵，开个玩笑，主要是不符合套路，万一改残了呢。

HTML:

<divclass="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">Slide 1</div>
       <div class="swiper-slide">Slide 2</div>
       <div class="swiper-slide">Slide 3</div>
   </div>
   <!-- 如果需要分页器---banner下边的圆点点 -->
   <div class="swiper-pagination"></div>

   <!-- 如果需要导航按钮--banner两侧的耳朵按钮 -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>

   <!-- 如果需要滚动条 -->
   <div class="swiper-scrollbar"></div>
</div>

对应的js参数：——基础参数—也称“开关”属性。

 varmySwiper = new Swiper ('.swiper-container', {
  // 如果需要分页器
   pagination: '.swiper-pagination',

   // 如果需要前进后退按钮
   nextButton: '.swiper-button-next',
   prevButton: '.swiper-button-prev',

   // 如果需要滚动条
   scrollbar: '.swiper-scrollbar',
  })

注意：需要什么参数就添加对应的HTML和配置文件中的“开关”属性。

其他常用功能参数—–奇迹就在这里哟–挨个探索下哟–要哪一条功能就加上哪一条


loop: true,//循环开关
autoplay: 3000,//自动播放间隔时间（单位：毫秒）默认不自动播放
direction: 'vertical',//切换方向 水平(horizontal)或垂直(vertical)
speed:300,//切换速度（单位：毫秒）
keyboardControl:true,//键盘控制开关
paginationType:‘bullets’,//分页器外观 bullets 、 fraction 、 progress
effect: 'fade',、//切换效果 ppe、cube、coverflow、flip

swiper animate二者结合使用

上边介绍的是swiper框架自己所能完成的事，就像pc端的wow.js一样自己也是可以单打独斗的，占据一席之地，但是要是与css的框架animate.css相遇能发生什么能量大爆发呢？wow.js和animate.css结合能实现页面滚动时释放动画；swiper.js和animate.css能实现触控后释放动画，通过类比，相信你可大概知道应该怎么使用了把，注意二者结为连理是要有证明的，证明文件swiper.animate.min.js必须引入。

1.引入文件(比之前多了animate.css 和swiper.animate.js)
 <link rel="stylesheet" href=“css/swiper.min.css">
 <link rel="stylesheet" href=“css/animate.min.css">    
 <script src=“js/swiper.min.js"></script>
 <script src=“js/swiper.animate.min.js"></script>
2.HTML
<div class="swiper-container">
    <div class="swiper-wrapper">
     <div class="swiper-slide">
             <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">你的内容</p>
        </div>
    </div>
</div>

ps：
在需要运动的元素上面增加类名 * ani*, 然后添加swiper animate 参数
ani就像wow.js和animate.css结合使用时一致，前边是控制时间的时间类，这里的ani就是；后边的取自animate.css里的效果名但是不是像wow.js结合那样直接写在wow类名后了，而是通过swiper-animate-effect=”fadeInUp”标签属性加上的，放心这个框架就三个属性要你控制。

标签属性：
Swiper-animate-effect  动画效果
swiper-animate-duration 动画持续时间（一定要带单位）
swiper-animate-delay    动画延迟时间（一定要带单位）
3.js调用：
var mySwiper = new Swiper ('.swiper-container', {
    //这里你还可以加入swiper上边单独使用时的一些控制参数
      loop: true,
      autoplay: 3000,
      direction: 'vertical',     

     //这里到下边都是结合使用必要的代码，粘过去不用管，不要任何修改。 
      onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
        swiperAnimateCache(swiper);//隐藏动画元素
        swiperAnimate(swiper);//初始化完成开始动画
      },
      onSlideChangeEnd: function(swiper){
        swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画
      }
 })

当然还有一些细致语法，注意事项，不同场景下遇到的问题如何解决，官网都有的。

奉上：

《官网》

http://www.swiper.com.cn/

《参数文档》

http://www.swiper.com.cn/api/index.html