swiper.js初涉

标签：

要做个手机端的轮播，研究了一下swiper.js

中文网站：http://www.swiper.com.cn/

英文网站：http://www.idangero.us/swiper/

记录一下代码：

var mySwiper = new Swiper(‘.swiper-container‘,{
        mode: ‘vertical‘,//滑动方向为垂直方向
        pagination: ‘.pagination‘,
        onSlidePrev:function(swiper){
         　　sDragDirection = ‘down‘;
        },
        onSlideNext:function(swiper){
         　　sDragDirection = ‘up‘;
        },
        onSlideReset:function(swiper){
         　　var iNum = 0;
         　　if(sDragDirection == ‘down‘){
          　　　　//console.log(‘向下拖动‘);//Ajax获取前一天数据
          　　　　iNum = 2;
          　　　　sDragDirection = ‘up‘;
         　　}
         　　else if(sDragDirection == ‘up‘){
         　　 　　//console.log(‘向上拖动‘);//Ajax获取后一天数据
          　　　　iNum = 0;
          　　　　sDragDirection = ‘down‘;
         　　}
         　　var newSlide1 = mySwiper.createSlide(‘<p>这是一个新的slide1</p>‘,‘swiper-slide blue-slide‘,‘div‘);//创建Slide
            　newSlide1.append(); //加到slides的最后
            　var newSlide2 = mySwiper.createSlide(‘<p>这是一个新的slide2</p>‘,‘swiper-slide blue-slide‘,‘div‘);
            　newSlide2.append(); //加到slides的最后
            　var newSlide3 = mySwiper.createSlide(‘<p>这是一个新的slide3</p>‘,‘swiper-slide blue-slide‘,‘div‘);
            　newSlide3.append(); //加到slides的最后
            　var iLength = 3;
            　for(var i=0;i<iLength;i++){
               　　mySwiper.removeSlide(0);删除前三个Slide
            　}
            　mySwiper.swipeTo(iNum ,1 ,false);
        }
 })

这次主要用到了

onSlidePrev:function(swiper){}向上一个滑动触发事件
onSlideNext:function(swiper){}向下一个滑动触发事件
onSlideReset:function(swiper){}滑块达不到是触发事件也就是上一个或下一个不存在了，触发事件

swiper.js初涉

标签：

原文地址：http://www.cnblogs.com/wjly/p/4331732.html