H5去年异军突起,在手机屏幕上大行其道,今年的势头怕会有过之而无不及。
今天拿swipe这个JS库练练手。
步骤:
添加页面的主体部分代码
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div>这里填写你要展示的文字或者图片</div> <div></div> <div></div> </div> </div>
添加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>
增加css样式
.swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }
效果图: