日期:2014-05-16  浏览次数:20762 次

转向移动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"