今天给小伙伴们分享一个好东西，webApp轮播效果，支持手机上用手左右滑动的效果， 因为手机的触摸事件和PC端用鼠标操作的事件是不同的，所以我就需要针对移动端的设备触摸事件做相应的轮播特效。大家可以去看下易迅的：http://m.yixun.com/t/和淘宝的 http://m.taobao.com/他们的轮播刚刚就是针对手机做的，在手机观看下你触摸滑动屏幕就可以切换幻灯片。
注意：本人在此声明， 此效果在pc上不支持，所以小伙伴们把这个传上服务器，在用手机浏览器访问体验效果
【手机webApp触摸左右滑动切换轮播图片广告】在网上找到一个非常不错的javascript写的原生插件，代码写的非常标准简洁，压缩后的大小只有4k，调用方法也简单，在这里应该有人会问为什么不用Jquery的插件！就单单为了这个效果就要加载jquery这个库90k+,对整个页面的大小造成了很大的负担，所以还是觉得用原生js写会好些，其实做手机版的网站，最好所有的js都用原生js写，因为这样整个前端页面就会控制在一个页面10k都可能不到的情况。可以完全适应我国坑爹的中国移动2G网络。
手机切屏效果图一张：
文章图片
html代码：
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://pan.baidu.com/s/1o6sOplS 密码:c3qx
