小编给大家分享一下偷窃者怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
偷窃者是什么?
偷窃者是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。
基本用法
偷窃者使用需要两个文件,一个是偷窃者。css,里面规定了一些在这个滑动轮播插件中常用的样式,当然如果你愿意的话可以自己定义样式
另外一个是偷窃者。js这个是插件的主体部分。
在页面中引入这两个文件之后首先要写基本的html结构
下面所有的使用方式基于偷窃者4。x
,,& lt; p 类=皊wiper-container"比; ,,,& lt; p 类=皊wiper-wrapper"比; ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 1 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 2 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 3 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 4 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 5 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 6 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 7 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 8 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 9 & lt;/p> ,,,,,& lt; p 类=皊wiper-slide"祝辞Slide 10 & lt;/p> ,,,& lt;/p> & lt;才能/p>
类名为swiper-container是滑动轮播插件的包裹器,类似于一个面具,一个窗口,swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合,在默认情况下是左右排列,当鼠标或者触屏进行操作的时候,改变的是这个元素的位置,而达到轮播的效果.swiper-slide则是每个轮播图元素,在写好基本html结构之后,需要对这个轮播图进行初始化
这样就能生成一个默认的轮播图,可以用鼠标或者触摸屏来进行左右的滑动
添加分页与导航
大部分的轮播图都有分页,导航,可以让用户看到目前是在什么位置,并且让用户知道这是一个可以交互的部分,添加分页的方式也很简单,只需要在初始化的时候添加选项指定一下分页的元素就行
html部分,在swiper-container下面添加下一个与上一个按钮
在这里swiper-button-next和swiper-button-prev都是指定好的按钮,下一个按钮会垂直居中并且靠右边,上一个按钮会垂直居中靠右边,当然也能自己指定按钮。
在初始化函数中添加按钮元素。
这样就能生成一个有导航按钮的轮播图了
,,,& lt; !——,分页,——比;
,,,& lt; p 类=皊wiper-pagination"祝辞& lt;/p>
,,,& lt; !——导航按钮——比;
,,,& lt; p 类=皊wiper-button-next"祝辞& lt;/p>
,,,& lt; p 类=皊wiper-button-prev"祝辞& lt;/p>
& lt;才能/p>
在初始化的时候加入分页元素
js:
