开源，免费的移动端触摸滑动插件------swiper介绍----淘抢购时间选择加载产品

于 2015-07-29 17:49:58 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： js

一 ：为什么选择swiper？

  • 免费，开源，稳定，应用广泛。
  • 可单独使用无需jquery，也可以结合jquery一起使用。
  • 简单配置即可实现手机，平板网站的大部分触摸功能。
  • 包括焦点图，tab，触摸滑动导航等。
swiper是纯javascript打造的滑动特效插件，面向手机，平板电脑等移动终端。它能实现触屏焦点图，触屏tab切换，触屏多图切换等常用效果。主要使用于移动端的网站，移动web apps，native apps  和hybrid apps 。主要是为ios而设计的，同时，在安卓，wp8系统也有良好的用户体验，swiper3.0开始将不再全面支持PC端。因此，如果需要在PC上兼容更多的浏览器，可以选择swiper2.x（甚至支持ie7).



二:swiper使用方法（以下出自swiper官网）



1：首先加载插件：需要使用的文件有swiper.mim.js和swiper.mim.css文件。
[html]  view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     ...  
  5.     <link rel="stylesheet" href="path/to/swiper.min.css">  
  6. </head>  
  7. <body>  
  8.     ...  
  9.     <script src="path/to/swiper.min.js"></script>  
  10. </body>  
  11. </html>  


如果你的页面加载了jquery.jd或者zepto.js，你可以选择使用更轻便的swiper.jquery.mim.js
[html]  view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     ...  
  5.     <link rel="stylesheet" href="path/to/swiper.min.css">  
  6. </head>  
  7. <body>  
  8.     ...  
  9.     <script src="path/to/jquery.js"></script>  
  10.     <script src="path/to/swiper.jquery.min.js"></script>  
  11. </body>  
  12. </html>  


2：html内容
[html]  view plain copy print ?
  1. <div class="swiper-container">  
  2.     <div class="swiper-wrapper">  
  3.         <div class="swiper-slide">Slide 1</div>  
  4.         <div class="swiper-slide">Slide 2</div>  
  5.         <div class="swiper-slide">Slide 3</div>  
  6.     </div>  
  7.     <!-- 如果需要分页器 -->  
  8.     <div class="swiper-pagination"></div>  
  9.       
  10.     <!-- 如果需要导航按钮 -->  
  11.     <div class="swiper-button-prev"></div>  
  12.     <div class="swiper-button-next"></div>  
  13.       
  14.     <!-- 如果需要滚动条 -->  
  15.     <div class="swiper-scrollbar"></div>  
  16. </div>  
  17. 导航等组件可以放在container之外  


3：初始化swiper，最好是紧靠</body>标签。

[html]  view plain copy print ?
  1. <script>          
  2.   var mySwiper = new Swiper ('.swiper-container', {  
  3.     direction: 'vertical',  
  4.     loop: true,  
  5.       
  6.     // 如果需要分页器  
  7.     pagination: '.swiper-pagination',  
  8.       
  9.     // 如果需要前进后退按钮  
  10.     nextButton: '.swiper-button-next',  
  11.     prevButton: '.swiper-button-prev',  
  12.       
  13.     // 如果需要滚动条  
  14.     scrollbar: '.swiper-scrollbar',  
  15.   })          
  16.   </script>  
  17. </body>  


如果不能写在html内容的后面，则需要在页面加载完成后再初始化。

[html]  view plain copy print ?
  1. <script type="text/javascript">  
  2. window.onload = function() {  
  3.   ...  
  4. }  
  5. </script>  

或者这样（已经加载jquery和zepeto）

[html]  view plain copy print ?
  1. <script type="text/javascript">  
  2. $(document).ready(function () {  
  3.  ...  
  4. })  
  5. </script>  


三：一些常用的的配置选项



1：一般选项
direction：swiper的滑动方向，可设置水平horizontal或垂直vertical。默认：水平horizontal。

speed：滑动速度，即slider自动滑动开始到结束的时间（单位MS）默认：300。

autoplay：自动切换的时间间隔（单位ms），设定该参数slide不会自动切换。默认：0.

freeMode：默认为false，slide滑动时滑动一格并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

scrollbar:出现滚动条。

[html]  view plain copy print ?
  1. <div class="swiper-container">  
  2.     <div class="swiper-wrapper">  
  3.         <div class="swiper-slide">Slide 1</div>  
  4.         <div class="swiper-slide">Slide 2</div>  
  5.         <div class="swiper-slide">Slide 3</div>  
  6.     </div>  
  7.     <div class="swiper-scrollbar"></div>  
  8. </div>  
  9. <script type="text/javascript">  
  10. var mySwiper = new Swiper('.swiper-container',{  
  11. scrollbar:'.swiper-scrollbar',  
  12.   });   
  13. </script>  


scrollbarHide:滚动条是否自动隐藏，默认：ture会自动隐藏。

[html]  view plain copy print ?
  1. <script type="text/javascript">  
  2. var mySwiper2 = new Swiper('.swiper-container',{  
  3. scrollbar:'.swiper-scrollbar' ,  
  4. scrollbarHide:false,  
  5.   });   
  6. </script>  

preloadImages：默认为true，swiper会强制加载所有图片。
lazyLoading:设为true开启图片延迟加载，使preloadImages无效。需要将图片img标签的src改写成data-src，且增加类名swiper-lazy。
背景的延迟加载则增加属性增加属性data-background。
还可以为slide加一个预加载，
[html]  view plain copy print ?
  1. <div class="swiper-lazy-preloader"></div>  
[html]  view plain copy print ?
  1. <div class="swiper-container">  
  2.     <div class="swiper-wrapper">  
  3.         <div class="swiper-slide">  
  4.             <img data-src="path/to/picture-1.jpg" class="swiper-lazy">  
  5.             <div class="swiper-lazy-preloader"></div>  
  6.         </div>  
  7.         <div class="swiper-slide">  
  8.             <img data-src="path/to/picture-2.jpg" class="swiper-lazy">  
  9.             <div class="swiper-lazy-preloader"></div>  
  10.         </div>  
  11.         <div class="swiper-slide">  
  12.             <div data-background="path/to/picture-3.jpg" class="swiper-lazy">slide3</div>  
  13.         </div>  
  14.     </div>  
  15. </div>   
  16. <script>   
  17. var mySwiper = new Swiper('.swiper-container',{  
  18. lazyLoading : true,  
  19. })  
  20. </script>  


loop:设置为true则开启loop模式，loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。默认：false。


2：回调函数：
onInit(swiper)：初始化后执行。

onTouchStart(swiper,even):当碰触到slider（不管slider有没有移动）时执行。

onTouchMove（swiper）：手指触碰Swiper并滑动（手指）时执行。此时slide不一定会发生移动。

onTouchEnd(swiper, event)：当释放slider时执行，释放即执行，不管slide有没有移动。
onSlideChangeStart(swiper):释放滑块时如果slider切换则执行。

onSlideChangeEnd(swiper):slide切换结束时执行。

onImagesReady(swiper):所有内置图像加载完成后执行。

onTransitionStart(swiper):slide过渡开始时触发。

onTransitionEnd(swiper):slide过渡结束时触发。

onTouchMoveOpposite  

(swiper, event):当手指触碰swiper并且没有按照direction设定的方向移动时执行。


onSilderMove(

 

swiper, event

 ):手指触碰swiper并拖动slide时执行。


onClick(

 

swiper, event

 ):当你点击swiper执行。在移动端，click有200到300ms延迟，所以请用onTap来代替onClick作为点击事件。


onTap(

 

swiper, event

 )：当你轻触swiper后执行


onReachBeginning( 

swiper):swiper切换到初始位置时执行。


onReachEnd(

 

swiper

 ):当切换到最后一个slide时执行。


[html]  view plain copy print ?
  1. <pre name="code" class="html"><pre name="code" class="html"><script language="javascript">   
  2. var mySwiper = new Swiper('.swiper-container',{  
  3. onInit: function(swiper){  
  4.       //Swiper初始化了  
  5.     },  
  6. onSlideChangeStart: function(swiper){       
  7.  alert('事件触发了;');    
  8.   }，  
  9. onSlideChangeEnd: function(swiper){      
  10.   alert('事件触发了;');    
  11.   }  
  12. })  
  13. </script>  
 
 
 

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 四，举个例子---淘宝的抢购页面“淘抢购”
 

 
 
  

 

 
 
 

 

 
 
  

 

 
 
  

 

 
 
 

 

 
 
 
  
 
   
 
    [html]  
    view plain 
    copy 
    print 
    ? 
    
 
    
 
   
 
  
 
  
  1.  <!DOCTYPE html>  
  2.  <html lang="en">  
  3.   <head>  
  4.    <meta charset="utf-8" />  
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
  6.    <title>Swiper demo</title>  
  7.    <!-- Link Swiper's CSS -->  
  8.    <link rel="stylesheet" href="swiper.min.css" />  
  9.    <!-- Demo styles -->  
  10.    <style>  
  11.    body{margin: 0;padding: 0}  
  12.    .timeaxis-current:after {  
  13.    content: "";  
  14.    position: absolute;  
  15.    top: 100%;  
  16.    left: 0;  
  17.    right: 0;  
  18.    z-index: 18;  
  19.    display: block;  
  20.    height: 0;  
  21.    width: 0;  
  22.    margin: auto;  
  23.    border-top: 7px solid #fc353a;  
  24.    border-left: 9px solid transparent;  
  25.    border-right: 9px solid transparent;  
  26.  }  
  27.  #swiper-container3 {  
  28.    width: 100%;  
  29.    height: 60px;  
  30.    
  31.    position: relative;  
  32.    
  33.    left: 0;  
  34.  }#swiper-container3 .swiper-slide {  
  35.    height: 30px;  
  36.    width: 100px!important;  
  37.    font-size: 14px;  
  38.    text-align: center;  
  39.    color: #000;  
  40.  }  
  41.  .timeaxis-current {  
  42.    position: absolute;  
  43.    top: 0;  
  44.    bottom: 0;  
  45.    left: 40%;  
  46.    right: 40%;  
  47.    z-index: 1;  
  48.    background: #fc353a;  
  49.  }  
  50.  .timeaxis_warp{position: relative;  background: #2d3845;}  
  51.  .timeaxis-item-inner{line-height: 20px;padding-top: 8px;}  
  52.      </style>  
  53.   </head>  
  54.   <body>  
  55.    <!-- Swiper -->  
  56.    <div class="timeaxis_warp">  
  57.    <div class="timeaxis-current"></div>  
  58.    <div class="swiper-container" id="swiper-container3">  
  59.    
  60.     <div class="swiper-wrapper">  
  61.      <div class="swiper-slide" data-num="0">  
  62.        <div class="timeaxis-item-inner">  
  63.      <div class="timeaxis-time">17:00</div>  
  64.    <div class="timeaxis-info">已开抢</div>  
  65.    </div>  
  66.      </div>  
  67.          <div class="swiper-slide" data-num="1">  
  68.        <div class="timeaxis-item-inner">  
  69.      <div class="timeaxis-time">19:00</div>  
  70.    <div class="timeaxis-info">已开抢</div>  
  71.    </div>  
  72.      </div>  
  73.          <div class="swiper-slide" data-num="2">  
  74.        <div class="timeaxis-item-inner">  
  75.      <div class="timeaxis-time">21:00</div>  
  76.    <div class="timeaxis-info">已开抢</div>  
  77.    </div>  
  78.      </div>  
  79.          <div class="swiper-slide" data-num="3">  
  80.        <div class="timeaxis-item-inner">  
  81.      <div class="timeaxis-time">22:00</div>  
  82.    <div class="timeaxis-info">已开抢</div>  
  83.    </div>  
  84.      </div>  
  85.         <div class="swiper-slide" data-num="4">  
  86.        <div class="timeaxis-item-inner">  
  87.      <div class="timeaxis-time">23:00</div>  
  88.    <div class="timeaxis-info">已开抢</div>  
  89.    </div>  
  90.      </div>  
  91.          <div class="swiper-slide" data-num="5">  
  92.          <div class="timeaxis-item-inner">  
  93.      <div class="timeaxis-time">00:00</div>  
  94.    <div class="timeaxis-info">已开抢</div>  
  95.    </div>  
  96.      </div>  
  97.          <div class="swiper-slide" data-num="6">  
  98.          <div class="timeaxis-item-inner">  
  99.      <div class="timeaxis-time">06:00</div>  
  100.    <div class="timeaxis-info">已开抢</div>  
  101.    </div>  
  102.      </div>  
  103.          <div class="swiper-slide" data-num="7">  
  104.        <div class="timeaxis-item-inner">  
  105.      <div class="timeaxis-time">08:00</div>  
  106.    <div class="timeaxis-info">已开抢</div>  
  107.    </div>  
  108.      </div>  
  109.          <div class="swiper-slide" data-num="8">  
  110.        <div class="timeaxis-item-inner">  
  111.      <div class="timeaxis-time">10:00</div>  
  112.    <div class="timeaxis-info">已开抢</div>  
  113.    </div>  
  114.      </div>  
  115.          <div class="swiper-slide" data-num="9">  
  116.        <div class="timeaxis-item-inner">  
  117.      <div class="timeaxis-time">12:00</div>  
  118.    <div class="timeaxis-info">已开抢</div>  
  119.    </div>  
  120.      </div>  
  121.          <div class="swiper-slide" data-num="10">  
  122.        <div class="timeaxis-item-inner">  
  123.      <div class="timeaxis-time">13:00</div>  
  124.    <div class="timeaxis-info">已开抢</div>  
  125.    </div>  
  126.      </div>  
  127.          <div class="swiper-slide" data-num="11">  
  128.        <div class="timeaxis-item-inner">  
  129.      <div class="timeaxis-time">15:00</div>  
  130.    <div class="timeaxis-info">已开抢</div>  
  131.    </div>  
  132.      </div>  
  133.          <div class="swiper-slide" data-num="12">  
  134.        <div class="timeaxis-item-inner">  
  135.      <div class="timeaxis-time">17:00</div>  
  136.    <div class="timeaxis-info">即将开场</div>  
  137.    </div>  
  138.      </div>  
  139.          <div class="swiper-slide" data-num="13">  
  140.          <div class="timeaxis-item-inner">  
  141.      <div class="timeaxis-time">19:00</div>  
  142.    <div class="timeaxis-info">即将开场</div>  
  143.    </div>  
  144.      </div>  
  145.          <div class="swiper-slide" data-num="14">  
  146.        <div class="timeaxis-item-inner">  
  147.      <div class="timeaxis-time">21:00</div>  
  148.    <div class="timeaxis-info">即将开场</div>  
  149.    </div>  
  150.      </div>  
  151.          <div class="swiper-slide" data-num="15">  
  152.        <div class="timeaxis-item-inner">  
  153.      <div class="timeaxis-time">22:00</div>  
  154.    <div class="timeaxis-info">即将开场</div>  
  155.    </div>  
  156.      </div>  
  157.         <div class="swiper-slide" data-num="16">  
  158.         <div class="timeaxis-item-inner">  
  159.      <div class="timeaxis-time">23:00</div>  
  160.    <div class="timeaxis-info">即将开场</div>  
  161.    </div>  
  162.      </div>  
  163.  </div>  
  164.     </div>  
  165.    </div>  
  166.    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>  
  167.    <!-- Swiper JS -->  
  168.    <script src="swiper.min.js"></script>  
  169.    <!-- Initialize Swiper -->  
  170.    <script>  
  171.  var mySwiper = new Swiper('.swiper-container',{  
  172.    
  173.        slidesPerView : "auto",/*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。*/  
  174.        freeMode : true, /*自动贴合*/  
  175.        freeModeSticky : true,/*自动贴合。*/  
  176.        centeredSlides : true,/*设定为true时，活动块会居中，而不是默认状态下的居左。*/  
  177.  slideToClickedSlide:true,/*设置为true则swiping时点击slide会过渡到这个slide。*/  
  178.        centeredSlides : true,/*设定为true时，活动块会居中，而不是默认状态下的居左。*/  
  179.        onInit: function(swiper){ /*回调函数，初始化后执行。*/  
  180.        $(".swiper-slide-active").css({  
  181.           "color": '#fff',  
  182.           "font-weight": 'bold'  
  183.       });  
  184.      },  
  185.    
  186.  onTransitionEnd: function(){  
  187.     /* alert(     $(".swiper-slide-active").attr("data-num"));  ajax传参数*/  
  188.       $(".swiper-slide-active").css({  
  189.           "color": '#fff',  
  190.           "font-weight": 'bold'  
  191.       });  
  192.      },  
  193.      onTouchMove: function(){  
  194.        $(".swiper-slide").not('.swiper-slide-active').css({  
  195.           "color": '#000',  
  196.           "font-weight": 'normal'  
  197.       });  
  198.      }  
  199.    
  200.    })  
  201.  </script>  
  202.    <script>  
  203.  </script>  
  204.   </body>  
  205.  </html>  
 
 
 
 
 
 
 

 

 
 
 

 

 
 
 效果 

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 
 
  

 

 三：swiper  animated  使用方法：
 

 
 
  

 

 
 
  

 

 
 swiper  animated是swiper中文网提供的用于在swiper内快速制作css3动画效果的小插件，适用于swiper2.x和swiper3.x. 

 

 
 
 

 

 
 注意：此插件不适用于loop模式。 

 

 
 
  

 

 
 1：使用swiper animate需要先加载swiper.animate.mim.js和animate.mim.css。 

 

 
  
 
 
  
 
   
 
    [html]  
    view plain 
    copy 
    print 
    ? 
    
 
    
 
   
 
  
 
  
  1.  <!DOCTYPE html>  
  2.  <html>  
  3.  <head>  
  4.      ...  
  5.      <link rel="stylesheet" href="path/to/swiper.min.css">  
  6.      <link rel="stylesheet" href="path/to/animate.min.css">  
  7.  </head>  
  8.  <body>  
  9.      ...  
  10.      <script src="path/to/swiper.min.js"></script>  
  11.      <script src="path/to/swiper.animate.min.js"></script>  
  12.  </body>  
  13.  </html>  
 
 
 
 
 
  
  
 
 2：初始化时隐藏元素并在需要时开始动画。 

 

 
 
  

 

 
  
 
 
  
 
   
 
    [html]  
    view plain 
    copy 
    print 
    ? 
    
 
    
 
   
 
  
 
  
  1.  <script>          
  2.    var mySwiper = new Swiper ('.swiper-container', {  
  3.    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit  
  4.      swiperAnimateCache(swiper); //隐藏动画元素   
  5.      swiperAnimate(swiper); //初始化完成开始动画  
  6.    },   
  7.    onSlideChangeEnd: function(swiper){   
  8.      swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画  
  9.    }   
  10.    })          
  11.    </script>  
  12.  </body>  
 
 
 
 
 3：在需要运动的元素上面增加类名 ani。 

 

 
 swiper animate需要指定的几个参数。 

 

 
 
 

 

 
 swiper-animate-effect：切换效果，例如：fadeInUp; 

 

 
 
  

 

 
 swiper-animate-duration：可选，动画持续时间（单位秒）,如：0.5s; 

 

 
 
  

 

 
 swiper-animate-delay：可选，动画延迟时间（单位秒），如0.3s. 

 

 
 
  

 

 
  
 
 
  
 
   
 
    [html]  
    view plain 
    copy 
    print 
    ? 
    
 
    
 
   
 
  
 
  
  1.  <div class="swiper-slide">  
  2.  <p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>  
  3.  </div>  
 
 
 


                

        

    

  



    



            

  



          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值