原文鏈接：http://caibaojian.com/swipe.html
插件特色
viaswipe.JS是一個比較有名的觸摸滑動插件，它能夠處理內容滑動，支持自定義選項，你可以讓它自動滾動，控制滾動間隔，返回回調函數等。經常可見使用在移動前端開發中。原文來自：http://caibaojian.com/swipe.html
使用方法
下面是一個比較簡單的使用例子，添加適當的html代碼和js代碼即可。
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div></div> </div> </div>
window.mySwipe = Swipe(document.getElementById('slider'));
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
實例
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) {}
});
原文鏈接：http://caibaojian.com/swipe.html
注意
via1、原始的Swipe JS，當你用點擊或者手勢控制了之后，輪播圖就不會自動滾動了，目前sina.cn網頁也是這個設計邏輯，但是有些客戶不給他自動滾動心理就不舒服，解決辦法是修改原swipe.js的stop函數如下：
function stop() {
//delay = 0;
delay = options.auto > 0 ? options.auto : 0;
clearTimeout(interval);
}
演示源代碼
<!DOCTYPE HTML> <html> <head> <title>Swipe 2</title> <meta http-equiv="X-UA-Compatible" content="IE=8"> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <link href='style.css' rel='stylesheet'/> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; visibility: hidden; position: relative; max-width: 500px; margin: 0 auto; _width:500px; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap div { float:left; width:100%; position: relative; } #pager em{display: inline-block; vertical-align: middle; margin:0 10px; color: #333; font-style: normal;} #pager em.on{color: #f00;} /* END required styles */ </style> </head> <body> <h1>Swipe 2</h1> <div id='mySwipe' class='swipe'> <div class='swipe-wrap'> <div> <b>1</b> </div> <div> <b>2</b> </div> <div> <b>3</b> </div> </div> </div> <div style='text-align:center;padding-top:20px;'> <div id="pager"> <em class="on">1</em> <em>2</em> <em>3</em> </div> <button onclick='mySwipe.prev();return false;'>prev</button> <button onclick='mySwipe.next();return false;'>next</button> </div> <!-- <script src="jquery.js"></script>--> <script src='swipe.js'></script> <script> // pure JS // var elem = document.getElementById('mySwipe'); 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) {} }); // function addEvent(obj,type,fn){ // if(obj.attachEvent){ // obj.attachEvent('on'+type,function(){ // fn.call(this); // }); // }else{ // obj.addEventListener(type,fn,false); // } // } //點擊數字導航跳轉 var bullets = document.getElementById('pager').getElementsByTagName('em'); for (var i=0; i < bullets.length; i++) { // (function(i, bullets){ // addEvent(bullets[i],'click',function(){ // mySwipe.slide(i, 500); // }) // })(i, bullets); 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'; }; // with jQuery // window.mySwipe = $('#mySwipe').Swipe().data('Swipe'); // url bar hiding (function() { var win = window, doc = win.document; // If there's a hash, or addEventListener is undefined, stop here if ( !location.hash || !win.addEventListener ) { //scroll to 1 window.scrollTo( 0, 1 ); var scrollTop = 1, //reset to 0 on bodyready, if needed bodycheck = setInterval(function(){ if( doc.body ){ clearInterval( bodycheck ); scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1; win.scrollTo( 0, scrollTop === 1 ? 0 : 1 ); } }, 15 ); if (win.addEventListener) { win.addEventListener("load", function(){ setTimeout(function(){ //reset to hide addr bar at onload win.scrollTo( 0, scrollTop === 1 ? 0 : 1 ); }, 0); }, false ); } } })(); </script>
原文鏈接：http://caibaojian.com/swipe.html
設置選項
- startSlide Integer (default:0) - 開始滾動的位置
- speed Integer (default:300) - 動畫滾動的間隔（秒數）
- auto Integer - 開始自動幻燈片（以毫秒為單位幻燈片之間的時間）
- continuous Boolean (default:true) - 創建一個無限的循環（當滑動到所有動畫結束時是否循環滑動）
- disableScroll Boolean (default:false) - 當滾動滾動條時是否停止幻燈片滾動
- stopPropagation Boolean (default:false) - 是否停止事件冒泡
- callback Function - 幻燈片運行中的回調函數
- transitionEnd Function - 動畫運行結束的回調函數