使用套件：
#1
套件名稱：jquery.touchwipe
套件功用：自動偵測手指滑動
套件網址：http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
#2
套件名稱：jquery.cycle
套件功用：圖片輪播
套件網址：http://jquery.malsup.com/cycle/
套件名稱：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> |
[範例預覽] [範例下載]