標籤：style art 元素 執行 實現 data als 預設 css
Skippr是一款帶左右箭頭,索引button,滑動轉場效果而且輕量、高速的投影片
設定
引入jquery.skippr.css、jquery.js、jquery.skippr.js 注意jQuery必須在jquery.skippr.js之前
<head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.skippr.js" type="text/javascript"></script></head>建立DIV元素,div標籤內加入background-images樣式
<div id="container"> <div id="myskipper"> <div style="background-image: url(css/img/test1.jpg)"></div> <div style="background-image: url(css/img/test2.jpg)"></div> <div style="background-image: url(css/img/test3.jpg)"></div> </div> </div>啟動
選擇目標元素調用skipper方法
$(document).ready(function(){ $("#myskipper").skippr();});
選項
$(document).ready(function(){ $("#myskipper").skippr({ transition: ‘slide‘, speed: 1000, navType: ‘block‘, arrows: true, autoPlay: false, autoPlayDuration: 5000, keyboardOnAlways: true, hidePrevious: false });});
transition: 指定投影片過渡類型,眼下Skippr支援‘fade‘或者‘slide‘這兩種方式。
speed: 投影片的過渡時間,預設是500。
navType: 導航元素的形狀。"block"或者"bubble",預設是"block"。
arrows：是否顯示導航箭頭,預設是true,設定為false隱藏箭頭。
autoPlay：是否使用投影片自己主動播放功能。
預設是false的。
設定為true來實現自己主動播放。
autoPlayDuration：設定的時間以毫秒為單位,自己主動播放執行,顯示每張投影片,預設值是5000毫秒。
hidePrevious：是否隱藏第一張投影片的箭頭,預設是"false"。
：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
項目示範原始碼下載：http://download.csdn.net/detail/itmyhome/7723757
itmyhome
jQuery投影片外掛程式Skippr
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
