生活随笔
收集整理的這篇文章主要介紹了
js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我也不知道叫什么功能通通叫出來得了,js滾動,滑動,幻燈片,輪播圖
下載插件swipe.js,swipe.css (?http://download.csdn.net/download/u014596302/9771299?)倆文件 引入html中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>測試內容滑動效果</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<link href='style.css' rel='stylesheet'/>
<style>/* Swipe 2 required styles */.swipe {overflow: hidden;visibility: hidden;position: relative;
}
.swipe-wrap {overflow: hidden;position: relative;
}
.swipe-wrap > div {float:left;width:100%;position: relative;
}/* END required styles */</style></head><body><h1>Swipe 測試</h1><div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'><div class='swipe-wrap'><div style=""><b>0區域</b></div><div><b>1區域</b></div><div><b>2區域</b></div><div><b>3區域</b></div><div><b>4區域</b></div><div><b>5區域</b></div><div><b>6區域</b></div><div><b>7區域</b></div><div><b>8區域</b></div><div><b>9區域</b></div><div><b>10區域</b></div></div>
</div><div style='text-align:center;padding-top:20px;'><button οnclick='mySwipe.prev()'>prev</button> <button οnclick='mySwipe.next()'>next</button></div><script src='swipe.js'></script>
<script>// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {startSlide: 4,//初始化頁面顯示第4個輪番圖 從0開始auto: 3000,//自動切換時間間隔3秒continuous: true,//切換所有圖片完畢 繼續切換第一張,反之false // disableScroll: true,// stopPropagation: true,// callback: function(index, element) {},//每次執行的回調// transitionEnd: function(index, element) {}
});</script></body>
總結
以上是生活随笔為你收集整理的js滚动,滑动,幻灯片,轮播,swipe js滚动,滑动,幻灯片,轮播的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
