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

最新推荐文章于 2024-04-18 10:20:31 发布

吴杼恩

最新推荐文章于 2024-04-18 10:20:31 发布

阅读量3.9k

点赞数

分类专栏：前端工具文章标签：淘抢购移动端触摸滑动tab 触摸滑动时间ajax

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/47001683

版权

前端工具专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一：为什么选择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文件。

<!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.jd或者zepto.js，你可以选择使用更轻便的swiper.jquery.mim.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>
导航等组件可以放在container之外

3：初始化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和zepeto）

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

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

1：一般选项

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

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

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

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

scrollbar:出现滚动条。

<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-scrollbar"></div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
scrollbar:'.swiper-scrollbar',
  }); 
</script>

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

<script type="text/javascript">
var mySwiper2 = new Swiper('.swiper-container',{
scrollbar:'.swiper-scrollbar' ,
scrollbarHide:false,
  }); 
</script>

preloadImages：默认为true，swiper会强制加载所有图片。

lazyLoading:设为true开启图片延迟加载，使preloadImages无效。需要将图片img标签的src改写成data-src，且增加类名swiper-lazy。

背景的延迟加载则增加属性增加属性data-background。

还可以为slide加一个预加载，

 <div class="swiper-lazy-preloader"></div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <div data-background="path/to/picture-3.jpg" class="swiper-lazy">slide3</div>
        </div>
    </div>
</div> 
<script> 
var mySwiper = new Swiper('.swiper-container',{
lazyLoading : true,
})
</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时执行。

<pre name="code" class="html"><pre name="code" class="html"><script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
      //Swiper初始化了
    },
onSlideChangeStart: function(swiper){     
 alert('事件触发了;');  
  }，
onSlideChangeEnd: function(swiper){    
  alert('事件触发了;');  
  }
})
</script>

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

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <title>Swiper demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper.min.css" />
  <!-- Demo styles -->
  <style>
  body{margin: 0;padding: 0}
  .timeaxis-current:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 18;
  display: block;
  height: 0;
  width: 0;
  margin: auto;
  border-top: 7px solid #fc353a;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
#swiper-container3 {
  width: 100%;
  height: 60px;

  position: relative;

  left: 0;
}#swiper-container3 .swiper-slide {
  height: 30px;
  width: 100px!important;
  font-size: 14px;
  text-align: center;
  color: #000;
}
.timeaxis-current {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40%;
  right: 40%;
  z-index: 1;
  background: #fc353a;
}
.timeaxis_warp{position: relative;  background: #2d3845;}
.timeaxis-item-inner{line-height: 20px;padding-top: 8px;}
    </style>
 </head>
 <body>
  <!-- Swiper -->
  <div class="timeaxis_warp">
  <div class="timeaxis-current"></div>
  <div class="swiper-container" id="swiper-container3">

   <div class="swiper-wrapper">
    <div class="swiper-slide" data-num="0">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">17:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="1">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">19:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="2">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">21:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="3">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">22:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
       <div class="swiper-slide" data-num="4">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">23:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="5">
        <div class="timeaxis-item-inner">
    <div class="timeaxis-time">00:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="6">
        <div class="timeaxis-item-inner">
    <div class="timeaxis-time">06:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="7">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">08:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="8">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">10:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="9">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">12:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="10">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">13:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="11">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">15:00</div>
  <div class="timeaxis-info">已开抢</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="12">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">17:00</div>
  <div class="timeaxis-info">即将开场</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="13">
        <div class="timeaxis-item-inner">
    <div class="timeaxis-time">19:00</div>
  <div class="timeaxis-info">即将开场</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="14">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">21:00</div>
  <div class="timeaxis-info">即将开场</div>
  </div>
    </div>
        <div class="swiper-slide" data-num="15">
      <div class="timeaxis-item-inner">
    <div class="timeaxis-time">22:00</div>
  <div class="timeaxis-info">即将开场</div>
  </div>
    </div>
       <div class="swiper-slide" data-num="16">
       <div class="timeaxis-item-inner">
    <div class="timeaxis-time">23:00</div>
  <div class="timeaxis-info">即将开场</div>
  </div>
    </div>
</div>
   </div>
  </div>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <!-- Swiper JS -->
  <script src="swiper.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
var mySwiper = new Swiper('.swiper-container',{

      slidesPerView : "auto",/*设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。*/
      freeMode : true, /*自动贴合*/
      freeModeSticky : true,/*自动贴合。*/
      centeredSlides : true,/*设定为true时，活动块会居中，而不是默认状态下的居左。*/
slideToClickedSlide:true,/*设置为true则swiping时点击slide会过渡到这个slide。*/
      centeredSlides : true,/*设定为true时，活动块会居中，而不是默认状态下的居左。*/
      onInit: function(swiper){ /*回调函数，初始化后执行。*/
      $(".swiper-slide-active").css({
         "color": '#fff',
         "font-weight": 'bold'
     });
    },

onTransitionEnd: function(){
   /* alert(     $(".swiper-slide-active").attr("data-num"));  ajax传参数*/
     $(".swiper-slide-active").css({
         "color": '#fff',
         "font-weight": 'bold'
     });
    },
    onTouchMove: function(){
      $(".swiper-slide").not('.swiper-slide-active').css({
         "color": '#000',
         "font-weight": 'normal'
     });
    }

  })
</script>
  <script>
</script>
 </body>
</html>

效果

三：swiper animated 使用方法：

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

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

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

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate.min.js"></script>
</body>
</html>

2：初始化时隐藏元素并在需要时开始动画。

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })        
  </script>
</body>

3：在需要运动的元素上面增加类名 ani。

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>
</div>

四：资源下载

http://download.csdn.net/detail/qianqianyixiao1/8939955

吴杼恩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
开源，免费的移动端触摸滑动插件------swiper介绍----淘抢购时间选择加载产品

1：为什么选择swiper？免费，开源，稳定，应用广泛。可单独使用无需jquery，也可以结合jquery一起使用。简单配置即可实现手机，平板网站的大部分触摸功能。包括焦点图，tab，触摸滑动导航等。swiper是纯javascript打造的滑动特效插件，面向手机，平板电脑等移动终端。它能实现触屏焦点图，触屏tab切换，触屏多图切换等常用效果。
复制链接

扫一扫