转向移动webApp开发的前端工程师必要的代码，手机webApp触摸左右滑动切换轮播图片广告

标签：手机web滑动轮播效果代码   支持手机左右滑动的图片切换效果代码   触摸屏左右滑动轮播特效代码   webapp图片滑动切换轮播   手机web滑动图片广告轮播   

         刚进一家新公司，公司专做手机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>

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;}

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

转向移动webApp开发的前端工程师必要的代码，手机webApp触摸左右滑动切换轮播图片广告,布布扣,bubuko.com

转向移动webApp开发的前端工程师必要的代码，手机webApp触摸左右滑动切换轮播图片广告

标签：手机web滑动轮播效果代码   支持手机左右滑动的图片切换效果代码   触摸屏左右滑动轮播特效代码   webapp图片滑动切换轮播   手机web滑动图片广告轮播   

原文地址：http://blog.csdn.net/zw200813ht/article/details/25459899