Swipe.js支援網頁點擊和數字導航

標籤：http   io   ar   使用   sp   for   on   2014   art   

Swipe.js是一個移動端的滑動外掛程式，使用手指觸摸滑動，並且支援左右導航，詳情請訪問之前的一篇文章介紹：Swipe.js。

但卻不支援網頁版的點擊跳轉和數字導航，這些需要你自己添加的，之前本來是想使用這個在前端開發中的，最後發現沒有這個功能，最近我又開始折騰了一下，發現原來也可以用在案頭版中，只不過需要自己額外添加一些代碼。並且支援IE6.支援自適應設計，不需要jquery，一下子感覺好贊。

首先添加外掛程式的路徑，然後添加以下js代碼：

var mySwipe = Swipe(document.getElementById(‘mySwipe‘), {// startSlide: 4,auto: 3000,// continuous: true,// disableScroll: true,// stopPropagation: true,callback: function(index, element) {slideTab(index);}// transitionEnd: function(index, element) {}});//點擊數字跳轉到響應的面板var bullets = document.getElementById(‘pager‘).getElementsByTagName(‘em‘);for (var i=0; i < bullets.length; i++) {var elem = bullets[i];elem.setAttribute(‘data-tab‘, i);elem.onclick = function(){mySwipe.slide(parseInt(this.getAttribute(‘data-tab‘), 10), 500);}}//高亮點擊的數字導航function slideTab(index){var i = bullets.length;while (i--) {bullets[i].className = bullets[i].className.replace(‘on‘,‘ ‘);}bullets[index].className = ‘on‘;};

示範和下載

我已將項目fork並添加了上面的代碼到示範文檔裡面了，你可以複製或者下載。

   示範地址 ,示範地址二(手機掃描下面二維碼)

Swipe.js支援網頁點擊和數字導航