jQuery插件Skippr實現焦點圖幻燈片特效
編輯：JavaScript綜合知識
史上效果最好的焦點圖幻燈片jQuery插件Skippr，輕量級插件、響應式布局插件，強大的參數自定義
配置，可自定義切換速度、切換方式、是否顯示左右箭頭、是否自動播放、自動播放間隔時間等配置 參數，調用插件也非常簡單易用，調用方式下面介紹下：
1.加載jQuery和插件
1
2
3
<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>
2.HTML內容
1
2
3
4
5
6
7
8
9
<div id="container">
<div id="theTarget">
<div style="background-image: url(img/image1.jpg)"></div>
<div style="background-image: url(img/image2.jpg)"></div>
<div style="background-image: url(img/image3.jpg)"></div>
<div style="background-image: url(img/image4.jpg)"></div>
<div style="background-image: url(img/image5.jpg)"></div>
</div>
</div>
3.函數調用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(document).ready(function(){
$("#theTarget").skippr({
transition: 'slide',
speed: 1000,
easing: 'easeOutQuart',
navType: 'block',
childrenElementType: 'div',
arrows: true,
autoPlay: false,
autoPlayDuration: 5000,
keyboardOnAlways: true,
hidePrevious: false
});
});
</script>
參數配置解釋
transition :(fade/slide)切換方式
speed : 切換速度(毫秒)
easing :切換效果(easeOutQuart)
navType :下面導航類型(block/bubble)
arrows :是否有箭頭(true/false)
autoPlay :是否自動播放(true/false)
autoPlayDuration : 自動播放間隔(毫秒)
keyboardOnAlways :是否支持鍵盤切換(true/false)
hidePrevious :是否隱藏第一張已經切換後的箭頭(true/false)
小編推薦
熱門推薦