移动端处理触控滑块的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 1div>
       <div class="swiper-slide">Slide 2div>
       <div class="swiper-slide">Slide 3div>
   div>
   
   <div class="swiper-pagination">div>

   
   <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

《官网》

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

《参数文档》

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

----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------

--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------