<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>演示</title>
  <!-- 首先引入JQuery -->
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- 引入核心swipe.js文件 -->
  <script src="swipe.js"></script>
  <!-- 幻燈片基礎(chǔ)樣式 -->
  <style>
    .swipe {
     overflow: hidden;
     visibility: hidden;
     position: relative;
    }
    .swipe-wrap {
     overflow: hidden;
     position: relative;
    }
    .swipe-wrap > div {
     float:left;
     width:100%;
     position: relative;
     font-size:140px; /* 這里樣式是為了演示方便，我特意加的 */
    }
  </style>
</head>
<body>
  <!-- 幻燈片實(shí)例代買，前兩層是外圍容器 -->
  <div id='slider' class='swipe'>
   <div class='swipe-wrap'>
    <!-- 這三個是幻燈片內(nèi)容，其中1，2,3等數(shù)字可換成圖片，樣式根據(jù)需求更改即可 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
   </div>
  </div>
  <!-- 頁面幻燈片運(yùn)行腳本（初始化） -->
  <script>
    window.mySwipe = Swipe(document.getElementById('slider'));
  </script>
</body>
</html>

以上代碼運(yùn)行結(jié)果：

通過鼠標(biāo)點(diǎn)擊或者放到手機(jī)上手指滑動，就可以看見幻燈片的運(yùn)行效果了。當(dāng)然，當(dāng)前只是最基本的，全部都是默認(rèn)配置。我們完全可以通過下面提供的參數(shù)，結(jié)合自己的需求，自義定出更好的效果來。

startSlide Integer (default:0) - index position Swipe should start at（滑動的索引值,即從*值開始滑動，默認(rèn)值為0）

speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑動的速度，默認(rèn)值300毫秒）

auto Integer - begin with auto slideshow (time in milliseconds between slides)（自動滑動，單位為毫秒）

continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循環(huán)滑動，默認(rèn)值為true）

disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何觸及此容器上滾動頁面，默認(rèn)值flase）

stopPropagation Boolean (default:false) - stop event propagation（停止事件傳播,默認(rèn)值flase）

callback Function - runs at slide change.（回調(diào)函數(shù)）

transitionEnd Function - runs at the end slide transition.（滑動過渡時調(diào)用的函數(shù)）

下面就是官方給的演示例子：

window.mySwipe = new Swipe(document.getElementById('slider'), {
 startSlide: 2,
 speed: 400,
 auto: 3000,
 continuous: true,
 disableScroll: false,
 stopPropagation: false,
 callback: function(index, elem) {},
 transitionEnd: function(index, elem) {}
});

從中我們不難看出具體參數(shù)的使用方法和位置。這一個如果感興趣，可以根據(jù)需要，自己加入?yún)?shù)試試，都是以json對象存在于Swipe的第二個參數(shù)的。

那么除了以上參數(shù)，Swipe還提供了一些常用的方法（API）:

prev() slide to prev（上一頁）

next() slide to next（下一頁）

getPos() returns current slide index position（獲取當(dāng)前索引位置）

getNumSlides() returns the total amount of slides（獲取所有滑塊總數(shù)）

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指數(shù)，持續(xù)時間）滑動設(shè)置索引位置（持續(xù)時間：轉(zhuǎn)型速度以毫秒為單位）

都是一些簡單的接口方法，你可以Js調(diào)用他們以達(dá)到你想要的效果。

下載地址：https://github.com/thebird/swipe/

您可能感興趣的文章: