用過智慧型手機的朋友，應該很習慣，透過手指頭，來螢幕左右滑動，切換照片或文章，而這個左右滑動，已是目前大家所習慣的操控模式，因此有不少的手機網頁，也把這個元素加到網頁中，最常見的例子就是奇摩的手機頁面，當進到手機頁面時，上方的新聞部分，就可透過左右滑動來切換上下則，或是直接點二旁的左右鈕，也可進行新聞的切換，而這看似很酷操控行為，其實作法相當的簡單，只要透過二個jQuery套件，jquery.cycle與jquery.touchwipe立即就可完成喔！現在就一塊來看看吧！
使用套件：
套件名稱：jquery.touchwipe
套件功用：自動偵測手指滑動
套件網址：http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
#2
套件名稱：jquery.cycle
套件功用：圖片輪播
套件網址：http://jquery.malsup.com/cycle/
有看過奇摩手機頁面的朋友，應該對於這區塊不感陌生，透過手指頭左右滑動，就可直接切換上下則新聞。
接著進到二個官方網站，將外掛套件的js給下載回來，然後把二隻js放在同一目錄下，再將下方的語法貼到網頁中，之後若要新增圖片，只要在<div id="imagegallery">~</div>中增加就會自動抓了，夠簡單吧!
<script src=“jquery-1.7.2.min.js”></script>
<script src=“jquery.touchwipe.1.1.1.js”></script>
<script src=“jquery.cycle.all.min.js”></script>
<script>
$(function(){
//參數設定:
//wipeLeft 向左滑動
//wipeRight 向右滑動
//wipeUp 向上滑動
//wipeDown 向下滑動
//min_move_x 水平移動最小像
//min_move_y 垂直移動最小像素
/*
$(“#imagegallery”).touchwipe({
wipeLeft: function() { alert(“left”); },
wipeRight: function() { alert(“right”); },
wipeUp: function() { alert(“up”); },
wipeDown: function() { alert(“down”); },
min_move_x: 20,
min_move_y: 20,
preventDefaultEvents: true
});*/
$('#imagegallery').cycle({
timeout: 0,
fx: 'scrollHorz',
next: '#next',
prev: '#prev'
});
$("#imagegallery").touchwipe({
wipeLeft: function() {
$("#imagegallery").cycle("next");
},
wipeRight: function() {
$("#imagegallery").cycle("prev");
}
});
})
</script>
<style>
body {
margin:0;
padding:0;
background:#ccc;
}
#wrap {
position:relative;
width:310px;
height:207px;
margin:0 auto;
overflow:hidden;
}
#imagegallery {
width:310px;
height:207px;
background:#fff;
margin:0 auto;
margin-top:10px;
overflow:hidden;
text-align:center;
}
#imagegallery a {
text-decoration:none;
color:#333333;
}
#nav {
width:310px;
height:50px;
position:absolute;
top:75px;
z-index:100;
}
#nav a {
display:block;
line-height:60px;
width:60px;
background:rgba(0,0,0,0.4);
text-align:center;
text-decoration:none;
font-size:21px;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
border-radius: 17px;
}
#prev {
float:left;
margin-left:-15px;
}
#next {
float:right;
margin-right:-15px;
}
</style>
</head>
<body>
<div id=“wrap”>
<div id=“imagegallery”>
<img src=“img01.jpg”>
<img src=“img02.jpg”>
<img src=“img03.jpg”>
<img src=“img04.jpg”>
<img src=“img05.jpg”>
</div>
<div id=“nav”><a id=“prev” href=“#”><</a> <a id=“next” href=“#”>></a></div>
</div>
[範例預覽] [範例下載]