【轉】移動webApp開發的前端工程師必要的代碼，手機webApp觸摸左右滑動切換輪播圖片廣告

         剛進一家新公司，公司專做手機App的，由於公司業務太多，傳統的方法開發app成本太高，每個app要開發幾個版本，公司有個想法就是做webApp來代替傳統app。我是才接觸到webApp的美工一枚。

         今天給小夥伴們分享一個好東西，webApp輪播效果，支持手機上用手左右滑動的效果，因爲手機的觸摸事件和PC端用鼠標操作的事件是不同的，所以我就需要針對移動端的設備觸摸事件做相應的輪播特效。大家可以去看下易迅的：http://m.yixun.com/t/ 和淘寶的http://m.taobao.com/ 他們的輪播剛剛就是針對手機做的，在手機觀看下你觸摸滑動屏幕就可以切換幻燈片。

注意：本人在此聲明，此效果在pc上不支持，所以小夥伴們把這個傳上服務器，在用手機瀏覽器訪問體驗效果

       在網上找到一個非常不錯的javascript寫的原生插件，代碼寫的非常標準簡潔，壓縮後的大小隻有4k，調用方法也簡單，在這裏應該有人會問爲什麼不用Jquery的插件！就單單爲了這個效果就要加載jquery這個庫90k+,對整個頁面的大小造成了很大的負擔，所以還是覺得用原生js寫會好些，其實做手機版的網站，最好所有的js都用原生js寫，因爲這樣整個前端頁面就會控制在一個頁面10k都可能不到的情況。可以完全適應我國坑爹的中國移動2G網絡。

手機切屏效果圖一張：

html代碼：

<div class="addWrap">  <div class="swipe" id="mySwipe">    <div class="swipe-wrap">      <div><a href="javascript:;"><img class="img-responsive" src="images/1.jpg"/></a></div>      <div><a href="javascript:;"><img class="img-responsive" src="images/2.jpg"/></a></div>      <div><a href="javascript:;"><img class="img-responsive" src="images/3.jpg"/></a></div>    </div>  </div>  <ul id="position">    <li class="cur"></li>    <li class=""></li>    <li class=""></li>  </ul></div>

css代碼：

body{ margin:0; padding:0}.addWrap{ position:relative; width:100%;background:#fff;margin:0; padding:0;}.addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;}.addWrap .swipe-wrap{overflow:hidden;position:relative;}.addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}#position{ position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}#position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}#position li.cur{background-color:#FF0000;}.img-responsive { display: block; max-width: 100%;  height: auto;}

由於js源碼太長，我這裏就直接寫調用方法吧，源碼我放在壓縮包裏，大家可以去裏面查看，我也已經把自己的註釋寫進去了，希望能幫助一些能理解代碼。（調用方法必須放在DOM後面，請注意）

var bullets = document.getElementById('position').getElementsByTagName('li');var banner = Swipe(document.getElementById('mySwipe'), {   auto: 2000, continuous: true,   disableScroll:false,    callback: function(pos) {       var i = bullets.length;     while (i--) {         bullets[i].className = ' ';       }       bullets[pos].className = 'cur'; }});

文件包下載地址：

http://download.csdn.net/detail/zw200813ht/7326281