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){}滑块达不到是触发事件也就是上一个或下一个不存在了,触发事件

 

posted on 2015-03-12 10:32  ☆ゞ杰ゞ★  阅读(240)  评论(0编辑  收藏  举报

导航