序
今天主要讲解一款移动端轻量级的，主要处理移动设备触控滑块的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.引入文件
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">“css</span>/<span class="hljs-attribute">swiper.min.css</span>"></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">“js</span>/<span class="hljs-attribute">swiper.min.js</span>"></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
2.HTML结构
<span class="hljs-tag"><<span class="hljs-title">divclass="swiper-container"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span>你的展示内容<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span>你的展示内容<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span>你的展示内容<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
3.Js文件调用
var swiper = newSwiper('.swiper-container');
`</pre>
ps： html中的三层结构你不能随意进行修改，内容展示内嵌在.swiper-slide即可；不过你要是顾虑为了标签语义结构的优化替换成ul>li，即ul类名叫swiper-slide；展示内容放在li里，但是大多移动端又不太在意语义的处理，所以不要有此顾略了。放心大胆的用吧，尽管满世界的div.修改自带的样式的话可以单独添加类名进行控制！！不要修改源文件，要不挺没礼貌的。呵呵，开个玩笑，主要是不符合套路，万一改残了呢。
HTML:
<pre>`<span class="hljs-tag"><<span class="hljs-title">divclass="swiper-container"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span>Slide 1<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span>Slide 2<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span>Slide 3<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 如果需要分页器---banner下边的圆点点 --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-pagination"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 如果需要导航按钮--banner两侧的耳朵按钮 --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-button-prev"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-button-next"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 如果需要滚动条 --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-scrollbar"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
`</pre>
对应的js参数：------基础参数---也称“开关”属性。
<pre>` varmySwiper = <span class="hljs-keyword">new</span> Swiper (<span class="hljs-string">'.swiper-container'</span>, {
<span class="hljs-comment">// 如果需要分页器</span>
pagination: <span class="hljs-string">'.swiper-pagination'</span>,
<span class="hljs-comment">// 如果需要前进后退按钮</span>
nextButton: <span class="hljs-string">'.swiper-button-next'</span>,
prevButton: <span class="hljs-string">'.swiper-button-prev'</span>,
<span class="hljs-comment">// 如果需要滚动条</span>
scrollbar: <span class="hljs-string">'.swiper-scrollbar'</span>,
})
`</pre>
注意：需要什么参数就添加对应的HTML和配置文件中的“开关”属性。
其他常用功能参数-----奇迹就在这里哟--挨个探索下哟--要哪一条功能就加上哪一条
<span class="hljs-attribute">loop</span>: true,<span class="hljs-comment">//循环开关</span>
<span class="hljs-attribute">autoplay</span>: <span class="hljs-number">3000</span>,<span class="hljs-comment">//自动播放间隔时间（单位：毫秒）默认不自动播放</span>
<span class="hljs-attribute">direction</span>: <span class="hljs-string">'vertical'</span>,<span class="hljs-comment">//切换方向 水平(horizontal)或垂直(vertical)</span>
<span class="hljs-attribute">speed</span>:<span class="hljs-number">300</span>,<span class="hljs-comment">//切换速度（单位：毫秒）</span>
<span class="hljs-attribute">keyboardControl</span>:true,<span class="hljs-comment">//键盘控制开关</span>
<span class="hljs-attribute">paginationType</span>:‘bullets’,<span class="hljs-comment">//分页器外观 bullets 、 fraction 、 progress</span>
<span class="hljs-attribute">effect</span>: <span class="hljs-string">'fade'</span>,、<span class="hljs-comment">//切换效果 ppe、cube、coverflow、flip</span>
《官网》
《参数文档》
http://www.swiper.com.cn/api/index.html
----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------
--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------
网友评论