H5去年異軍突起，在手機(jī)屏幕上大行其道，今年的勢(shì)頭怕會(huì)有過(guò)之而無(wú)不及。
今天拿swipe這個(gè)JS庫(kù)練練手。
步驟：
添加頁(yè)面的主體部分代碼
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div>這里填寫(xiě)你要展示的文字或者圖片</div> <div></div> <div></div> </div> </div>添加script語(yǔ)句（做好添加到頁(yè)面的最后，保證所有的元素已經(jīng)加載完成）
<script > window.slider = Swipe(document.getElementById('slider'), { startSlide: 0, speed: 300, auto: 4000, continuous: false, disableScroll: false, stopPropagation: false, //回調(diào)函數(shù)，每張頁(yè)面加載完成后執(zhí)行 callback: function(index, elem) { //alert(elem); }, //所有頁(yè)面顯示完成后執(zhí)行 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; }
效果圖：
