swiper，animate使用方法-学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
swiper，animate使用方法
来源：互联网 更新时间： 18:58:35 责任编辑：王亮字体：
1、先链接css和js文件
&link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/&
&link rel="stylesheet" type="text/css" href="css/animate.min.css"/&
&script type="text/javascript" src="js/swiper-3.3.1.min.js"&&/script&
&script type="text/javascript" src="js/swiper.animate1.0.2.min.js"&&/script&
/* 初始化swiper.js */
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination', //分页器
direction:'vertical', //垂直方向换页
slideToClickedSlide: true, //slide1向slide2 swipe的过程中轻点slide1会回到slide1
/* 初始化animate */
onInit: function(swiper){
//Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper);
//隐藏动画元素
setTimeout(function(){ //2s后开始运行动画（移动端总是没加载完图片就开始动画了。。。。。）
swiperAnimate(swiper); //初始化完成开始动画
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
4、使用animate的动画，注意class中要加&ani&
&img class="ani pic" src="pic.jpg"
swiper-animate-effect="zoomIn" swiper-animate-duration="0.7s" /&
　　自定义的动画效果：
　　html中添加class=&ani& 和swiper-animate-effect=&动画名&，可以与animate自带的动画一样，在每次切换时运行动画。
&img class="ani pic" src="pic.jpg"
swiper-animate-effect="shutter2" /&
　　css中定义效果
@-webkit-keyframes shutter2{
from{top: 100%;}
to{top: 0;}
.shutter2{
-webkit-animation: shutter2 0.5s forwards;
animation: shutter2 0.5s forwards;
API地址：&.cn/api/start/0.html
相关文章：
上一篇文章：下一篇文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 学网 版权所有
京ICP备号-1 京公网安备02号1919人阅读
常用特效（19）
很多人找了很久，都没找到一款好用的H5全屏滚动插件，而H5全屏滚动又是一个常用的技术，常用于移动端的营销推广，虽然现在有很多类似易企秀之类的合成软件，除了数据没法对接到自己平台之外，收集用户数据也有被平台运营方获取的风险。所有我们今天自己查找了一款全屏滚动插件，就是swiper，很多人乍一看，swiper这么的API一下就蒙圈了，这里我做了一下简要的提炼，方便你快速上手，H5移动端全屏滚动动画的制作。
说白了，关于此类动画页面，你只要掌握swiper相关的回调函数和,当然了，你要是css3基础过硬，就更棒了！
下面我们首先介绍几个关键性的回调函数
onInit(swiper)
回调函数，初始化后执行。 可选Swiper实例作为参数。
使用方法实例：
language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
onSlideChangeEnd(swiper) 回调函数，回调函数，slider切换结束时执行。
使用方法实例：
language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeEnd: function(swiper){
alert('事件触发了;');
onTransitionEnd(swiper) 回调函数，过渡结束时触发，接收Swiper实例作为参数。
使用方法实例：
&script language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
onTransitionEnd: function(swiper){
onProgress(swiper, progress) 回调函数，当Swiper的progress被改变时执行。接受Swiper实例和progress作为参数（可选）。
使用方法实例：
language="javascript"&
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
onProgress: function(swiper, progress){
for (var i = 0; i & swiper.slides. i++){
var slide = swiper.slides[i];
es = slide.
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'rotate('+360*slide.progress+'deg)';
onSetTransition(swiper, transition) 回调函数，每次当Swiper开始过渡动画时持续执行。transtion获取到的是Swiper的speed值。
下面在说说Swiper Animate使用方法，需要引入swiper.animate.min.js和animate.min.css等常识就不说了，
初始化时隐藏元素并在需要的时刻开始动画。
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
在需要运动的元素上面增加类名
，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
&div class="swiper-slide"&
&p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"&内容&/p&
下面我粘上一个demo，希望大家能看懂哈
&!DOCTYPE html&
lang="en"&
http-equiv="Content-Type" content="text/ charset=utf-8" /&
&打虎新形态&
name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/&
rel="stylesheet" href="css/swiper.min.css"&
rel="stylesheet" href="css/animate.min.css"&
src="js/swiper.min.js"&&
src="js/swiper.animate.min.js"&&
*{margin:0;padding:0;}
,{height:100%;}
{font-family:"Microsoft Yahei";}
.swiper-container {width: 100%;height: 100%;background:#000;}
.swiper-slide { width:100%;height:100%;background:url(upload/bg.jpg) no-repeat left top;background-size:100% 100%;}
{display:block;}
#array{position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;}
.ani{position:absolute;}
@-webkit-keyframes start {
0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
60% {opacity: 1;-webkit-transform: translate(0,0);}
100% {opacity: 0;-webkit-transform: translate(0,-8px);}
@-moz-keyframes start {
0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
60% {opacity: 1;-moz-transform: translate(0,0);}
100% {opacity: 0;-moz-transform: translate(0,-8px);}
@keyframes start {
0%,30% {opacity: 0;transform: translate(0,10px);}
60% {opacity: 1;transform: translate(0,0);}
100% {opacity: 0;transform: translate(0,-8px);}
class="swiper-container"&
class="swiper-wrapper"&
class="swiper-slide swiper-slide1"&
src="upload/bonus_01.png" class="ani resize" style="width:320height:43left:0top:30z-index:3;" swiper-animate-effect="swing" swiper-animate-duration="1.5s" swiper-animate-delay="0s"
class="swiper-slide swiper-slide2"&
src="upload/004.png" class="ani resize" style="width:320height:64left:0top:10z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s"
src="images/arrow.png" style="width:20height:15 top:460 left:150" id="array" class="resize"&
class="swiper-pagination"&&
scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
for (var j = 0; j & resizes. j++) {
resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px';
var mySwiper = new Swiper ('.swiper-container',{
direction : 'vertical',
mousewheelControl : true,
onInit: function(swiper){
swiperAnimateCache(swiper);
swiperAnimate(swiper);
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper);
onTransitionEnd: function(swiper){
swiperAnimate(swiper);
onProgress: function(swiper){
for (var i = 0; i & swiper.slides. i++) {
var slide = swiper.slides[i];
var progress = slide.
var translate = progress*swiper.height/4;
scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
slide.style.opacity =
es = slide.
es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';
onSetTransition: function(swiper, speed) {
for (var i = 0; i & swiper.slides. i++){
es.webkitTransitionDuration =
es.MsTransitionDuration =
es.msTransitionDuration =
es.MozTransitionDuration =
es.OTransitionDuration =
es.transitionDuration = speed + 'ms';
相关详细资料参考
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：37062次
积分：1452
积分：1452
排名：千里之外
原创：109篇
转载：14篇
(4)(3)(2)(6)(13)(19)(7)(4)(31)(17)(5)(5)(7)使用方法示例
&script language=&javascript&&
var mySwiper = new Swiper('.swiper-container',{
onTap: function(swiper){
alert('你tap了Swiper');
微信扫一扫打赏我们
转载原创文章请注明：文章转载自：Swiper中文网 []
本文地址：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）移动端触摸滑动插件Swiper04/02/2015一、了解Swiper目前移动端项目一般都需要具有触屏焦点图的效果，如果你也需要实现这一功能的话，Swiper是一个不错的选择。1、他不需要加载任何公共库（如jQuery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的动行，如jQuery，Zepto，jQuery Moblie等。2、Swiper默认的触摸比例为1:1，你可以通过修改Swiper的设置来改变这个比例。3、Swiper 增加了选项可以开启 Mutation Observer,有了这个功能Swiper可以在你动态改变Dom或Swiper的样式时自动重新初始化并计算所需的元素。4、Swiper拥有丰富的API，他允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果。5、Swiper是唯一一个支持100%RTL布局的滑动插件。6、Swiper允许多行Slides布局，这样每行的slide就会较少。7、增加了三种新的过渡效果：淡入、3D方块、3D流。8、现在Swiper可以用来控制其他的Swiper，甚至可以同时控制。9、Swiper带有所有常用的导航控制器，包括分页器，切换箭头，滚动条。10、Swiper使用流行的flexbox布局，这样就解决了很多计算尺寸方面的问题。这种布局也允许用CSS来设定Slides。11、你可以在Swiper初始化的时候设定slide的显示，包括每行、每列、每组数量以及他们的间距等。12、Swiper支持流行的视差滚动效果，这种效果可以应用在Swiper里任一元素上，图片、文本块、标题、背景等等。13、Swiper懒加载延迟了不活动/不可见的图片加载，用户滑动时才加载他们。这一特性可以使页面加载更快并可提高Swiper的性能。14、Swiper3还包含了所有swiper2的牛逼功能，包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper。二、使用方法1.首先加载插件，Swiper准备了基础测试包供你使用，测试包里面已经包含了swiper.min.js和swiper.min.css文件。&!DOCTYPE html&&html&&head&&&link rel=&stylesheet& href=&path/to/swiper.min.css&&&/head&&body&&&script src=&path/to/swiper.min.js&&&/script&&/body&&/html&如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。&!DOCTYPE html&&html&&head&&&link rel=&stylesheet& href=&path/to/swiper.min.css&&&/head&&body&&&script src=&path/to/jquery.js&&&/script&&script src=&path/to/swiper.jquery.min.js&&&/script&&/body&&/html&2.HTML内容。&div class=&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&&!& 如果需要分页器 &&&div class=&swiper-pagination&&&/div&&!& 如果需要导航按钮 &&&div class=&swiper-button-prev&&&/div&&div class=&swiper-button-next&&&/div&&!& 如果需要滚动条 &&&div class=&swiper-scrollbar&&&/div&&/div&3.你可能想要给Swiper定义一个大小。.swiper-container {width: 600height: 300}4.初始化Swiper：最好是挨着&/body&标签&script&var mySwiper = new Swiper (&.swiper-container&, {direction: &vertical&,loop: true,// 如果需要分页器pagination: &.swiper-pagination&,// 如果需要前进后退按钮nextButton: &.swiper-button-next&,prevButton: &.swiper-button-prev&,// 如果需要滚动条scrollbar: &.swiper-scrollbar&,})&/script&&/body&如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。&script type=&text/javascript&&window.onload = function() {&}&/script&或者这样（Jquery和Zepto）&script type=&text/javascript&&$(document).ready(function () {&})&/script&三、APIParameterTypeDefaultDescriptioninitialSlidenumber0初始slide的索引directionstring&horizontal&可以是&horizontal&或&vertical&(垂直滑动)speednumber300滑动速度(单位ms)setWrapperSizebooleanfalse开启这个设定会在Wrapper上添加等于slides相加的宽高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。virtualTranslatebooleanfalse虚拟位移。当你启用这个参数，Swiper除了不会移动外其他的都像平时一样运行，仅仅是不会在Wrapper上设置位移。当你想自定义一些slide切换效果时可以用。比如我们提供的cube切换效果，当slide切换时，Wrapper的位置是固定的。Autoplay(自动切换)autoplaynumber-自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。autoplayDisableOnInteractionbooleantrue如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。Progress(进度)watchSlidesProgressbooleanfalse开启这个参数来计算每个slide的progress(进展)watchSlidesVisibilitybooleanfalse必须先开启watchSlidesProgress 开启了watchSlidesVisibility，则会在每个可见slide增加一个classnameFreemode(free模式)freeModebooleanfalse设置为true时，将开启free模式，即滑动停止后停在当前位置，而不是当前帧的位置。freeModeMomentumbooleantrue设置为true时，滑动释放slide后仍会靠动量继续滑动，为false时，释放后立即停止。freeModeMomentumRationumber1设置的值越大，当释放slide时的滑动距离越大。freeModeMomentumBouncebooleantruefalse时禁用free模式下的动量反弹，slides通过惯性滑动到边缘时，无法反弹。freeModeMomentumBounceRationumber1值越大产生的边界反弹效果越明显，反弹距离越大。Effects(切换效果)effectstring&slide&可设置为&slide&（位移切换）&fade&（淡入）&cube&（方块）&coverflow&（3d流）。fadeobjectfade: {crossFade: false}fade效果参数cubeobjectcube: {slideShadows: true,shadow: true,shadowOffset: 20,shadowScale: 0.94}cube效果参数coverflowobjectcoverflow: {rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows : true}coverflow效果参数Parallax(视差效果)parallaxbooleanfalse开启视差效果Slides grid(网格分布)spaceBetweennumber0slide之间的距离（单位px）slidesPerViewnumber or &auto&1设置slider容器能够同时显示的slides数量(carousel模式)。slidesPerColumnnumber1多行布局里面每列的slide数量。slidesPerColumnFillstring&column&多行布局中以什么形式填充&cloumn&和&row&slidesPerGroupnumber1在carousel mode下定义slides的数量多少为一组。centeredSlidesbooleanfalse设定为true时，活动块会居中，而不是默认状态下的居左。Grab Cursor(抓手光标)grabCursorbooleanfalse设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状Touches(触发)touchRationumber1触摸距离与slide滑动距离的比率。touchAnglenumber45允许触发拖动的角度值simulateTouchbooleantrue默认为true，Swiper接受鼠标点击、拖动shortSwipesbooleantrue设置为false时，进行快速短距离的拖动无法触发Swiper。longSwipesbooleantrue设置为false时，进行长时间长距离的拖动无法触发Swiper。longSwipesRationumber0.5进行longSwipes时触发swiper所需要的最小拖动距离比例，值越大触发Swiper所需距离越大。最大值0.5。longSwipesMsnumber300定义longSwipes的时间（单位ms），超过则属于longSwipes。followFingerbooleantrue如设置为false，拖动slide时它不会动，当你释放时slide才会切换。onlyExternalbooleanfalse值为true时，slide无法拖动，只能使用扩展API函数来改变slides滑动。thresholdnumber0拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。touchMoveStopPropagationbooleantruetrue时阻止touchmove冒泡事件。Touch Resistance(触摸阻力)resistancebooleantrue值为false时将slide拖出边缘时完全没有抗力resistanceRationumber0.85抵抗率。resistant bounds（抵抗反弹）抵抗力的大小比例。值越小抵抗越大越难将slide拖出边缘。Clicks(点击)preventClicksbooleantrue默认为true，当swiping时阻止意外的链接点击。preventClicksPropagationbooleantrue阻止click冒泡。拖动Swiper时阻止click事件。slideToClickedSlidebooleanfalse设置为true则swiping时点击slide会过渡到这个slide。Swiping / No swiping(禁止)allowSwipeToPrevbooleantrue设为false可禁止向左或上滑动。allowSwipeToNextbooleantrue设置为false可禁止向右或下滑动。noSwipingbooleantrue设为true时，可以在slide上增加类名&swiper-no-swiping&，使该slide无法滑动。noSwipingClassstring&swiper-no-swiping&不可拖动块的类名，当设置为true时，并且在slide加上此类名，slide无法拖动。swipeHandlerstring / HTMLElementnullCSS选择器或者HTML元素。你只能拖动它进行swiping。Pagination(分页器)paginationstring / HTMLElementnull分页器容器的css选择器或HTML标签。paginationHidebooleantruetrue时点击Swiper的container会显示/隐藏分页器。paginationClickablebooleanfalse值为true时，点击分页器的指示点时会发生Swiper。paginationBulletRender(index, className)functionnull渲染分页器小点。这个参数允许完全自定义分页器的指示点。Navigation Buttons(前进后退按钮)nextButtonstring / HTMLElementnull前进按钮的css选择器或HTML元素。prevButtonstring / HTMLElementnull后退按钮的css选择器或HTML元素。Scollbar(滚动条)scrollbarstring / HTMLElementnullScrollbar容器的css选择器或HTML元素。scrollbarHidebooleantrue滚动条是否自动隐藏。默认：true会自动隐藏。Keyboard / Mousewheel(键盘、鼠标控制选项)keyboardControlbooleanfalse是否开启键盘控制Swiper切换。设置为true时，能使用键盘方向键控制slide滑动。mousewheelControlbooleanfalse是否开启鼠标控制Swiper切换。设置为true时，能使用鼠标滑轮控制slide滑动。mousewheelForceToAxisbooleanfalse当值为true让鼠标滑轮固定于轴向。当水平mode时的鼠标滑轮只有水平滚动才会起效，当垂直mode时的鼠标滑轮只有垂直滚动才会起效。普通家用鼠标只有垂直方向的滚动。Hash Navigation(散列导航)hashnavbooleanfalse如需使用散列导航（有点像锚链接）将此参数设置为true。Images(图片选项)preloadImagesbooleantrue默认为true，Swiper会强制加载所有图片。updateOnImagesReadybooleantrue当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。lazyLoadingbooleanfalse设为true开启图片延迟加载，使preloadImages无效。lazyLoadingInPrevNextbooleantrue设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。lazyLoadingOnTransitionStartbooleantrue默认当过渡到slide后开始加载图片，如果你想在过渡一开始就加载，设置为trueLoop(环路)loopbooleanfalse设置为true 则开启loop模式。loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。loopAdditionalSlidesnumber0loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。loopedSlidesnumbernull在loop模式下使用slidesPerview:&auto&,还需使用该参数设置所要用到的loop个数。Controller(双向控制)control[Swiper Instance]undefined设置为另外一个Swiper实例开始控制该Swiper。controlInversebooleanfalse设置为true时控制方向倒转。Callbacks(回调函数)runCallbacksOnInitbooleantrue初始化时触发 [Transition/SlideChange] [Start/End] 回调函数。这些回调函数会在下次初始化时被清除如果initialSlide不为0。onInit(swiper)function回调函数，初始化后执行。onSlideChangeStart(swiper)function回调函数，滑块释放时如果触发slider切换则执行。free模式下无效。onSlideChangeEnd(swiper)function回调函数，slider切换结束时执行。free模式下无效。onTransitionStart(swiper)function回调函数，过渡开始时触发，接收Swiper实例作为参数。onTransitionEnd(swiper)function回调函数，过渡结束时触发，接收Swiper实例作为参数onTouchStart(swiper, event)function回调函数，当碰触到slider时执行。可选Swiper和touchstart事件作为参数。onTouchMove(swiper, event)function回调函数，手指触碰Swiper并滑动（手指）时执行。此时slide不一定会发生移动onTouchMoveOpposite(swiper, event)function回调函数，当手指触碰Swiper并且没有按照设定的方向移动时执行。可选Swiper实例和touchmove事件作为参数。onSliderMove(swiper, event)function回调函数，手指触碰Swiper并拖动slide时执行。onTouchEnd(swiper, event)function回调函数，当释放slider时执行。onClick(swiper, event)function回调函数，当你点击或轻触Swiper 300ms后执行。onTap(swiper, event)function回调函数，当你轻触(tap)Swiper后执行。在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件。onDoubleTap(swiper, event)function回调函数，当你两次轻触Swiper 时执行，类似于双击。onImagesReady(swiper)function回调函数，所有内置图像加载完成后执行，同时&updateOmImagesReady&需设置为&true&。onProgress(swiper, progress)function回调函数，当Swiper的progress被改变时执行。onReachBeginning(swiper)function回调函数，Swiper切换到初始化位置时执行。onReachEnd(swiper)function回调函数，当Swiper切换到最后一个Slide时执行。onDestroy(swiper)function回调函数，销毁Swiper时执行。onSetTranslate(swiper, translate)function回调函数，每次当Swiper开始过渡动画时持续执行。transtion获取到的是Swiper的speed值。onSetTransition(swiper, transition)function回调函数，wrapper改变其位置时执行。返回当前transform 的偏移量的对象。onAutoplayStart(swiper)function回调函数，自动切换开始时执行。onAutoplayStop(swiper)function回调函数，自动切换结束时执行。onLazyImageLoad(swiper,slide, image)function回调函数，图片延迟加载开始时执行。onLazyImageReady(swiper, slide, image)function回调函数，图片延迟加载结束时执行。Namespace(命名空间)slideClassstring&swiper-slide&设置slide的类名。slideActiveClassstring&swiper-slide-active&设置活动块的类名。slideVisibleClassstring&swiper-slide-visible&设置可视块的类名。slideDuplicateClassstring&swiper-slide-duplicate&loop模式下被复制的slide的类名。slideNextClassstring&swiper-slide-next&active slide的下一个slide的类名。slidePrevClassstring&swiper-slide-prev&active slide的前一个slide的类名。wrapperClassstring&swiper-wrapper&设置wrapper的css类名。bulletClassstring&swiper-pagination-bullet&pagination分页器内元素的类名。bulletActiveClassstring&swiper-pagination-bullet-active&pagination分页器内活动(active)元素的类名。paginationHiddenClassstring&swiper-pagination-hidden&分页器隐藏时的类名。buttonDisabledClassstring&swiper-button-disabled&前进后退按钮不可用时的类名。Swiper常用方法1、mySwiper.destroy()销毁Swiper(true)。销毁所有绑定的监听事件，移除鼠标键盘事件，释放浏览器内存。2、mySwiper.startAutoplay()开始自动切换。一般用来做&Play&按钮。3、mySwiper.stopAutoplay()停止自动切换。一般用来制作&pause&按钮。4、mySwiper.slideNext(runCallbacks, speed)滑动到下一个滑块。5、mySwiper.slidePrev(runCallbacks, speed)滑动到前一个滑块。6、mySwiper.slideTo(index, speed, runCallbacks)滑动到到指定滑块。index:必选，num，指定将要切换到的slide的索引，第一个为0speed:可选，num(单位ms)，切换速度runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。附：Swiper官网：http://www.idangero.us/sliders/swiper/index.phpSwiper中文网：.cn/
转自：http://qqfe.org/
如果您想留下此文，您可以将其发送至您的邮箱(将同时以邮件内容&PDF形式发送)
相关文章推荐
(Ctrl+Enter提交) &&
已有0人在此发表见解
&在& 10:11收藏到了
&&在信息爆炸的时代，您的知识需要整理，沉淀，积累！Lai18为您提供一个简单实用的文章整理收藏工具，在这里您可以收藏对您有用的技术文章，自由分门别类，在整理的过程中，用心梳理自己的知识！相信，用不了多久，您收藏整理的文章将是您一生的知识宝库！
· 蜀ICP备号-1