Swipe的一个例子

H5去年异军突起，在手机屏幕上大行其道，今年的势头怕会有过之而无不及。
今天拿swipe这个JS库练练手。

---

步骤：

1. 添加页面的主体部分代码
   <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>这里填写你要展示的文字或者图片</div> <div></div> <div></div> </div> </div>

2. 添加script语句（做好添加到页面的最后，保证所有的元素已经加载完成）
   <script > window.slider = Swipe(document.getElementById('slider'), { startSlide: 0, speed: 300, auto: 4000, continuous: false, disableScroll: false, stopPropagation: false, //回调函数，每张页面加载完成后执行 callback: function(index, elem) { //alert(elem); }, //所有页面显示完成后执行 transitionEnd: function(index, elem) { if(index == 6){ setTimeout(function(){ alert("2015 is Loading,Write Something..."); },4000); } } }); </script>

3. 增加css样式
   .swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }

效果图：

2015-01-16_154007.png 2015-01-16_154033.png 2015-01-16_154044.png 2015-01-16_154107.png