jQuery外掛程式Skippr實現焦點圖投影片特效，jqueryskippr

jQuery外掛程式Skippr實現焦點圖投影片特效，jqueryskippr
史上效果最好的焦點圖投影片jQuery外掛程式Skippr，輕量級外掛程式、響應式布局外掛程式，強大的參數自訂配置，可自訂切換開關速度、切換方式、是否顯示左右箭頭、是否自動播放、自動播放間隔時間等配置參數，調用外掛程式也非常簡單易用，調用方式下面介紹下：1.載入jQuery和外掛程式

<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內容

<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.函數調用

<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)查看DEMO   指令碼下載

以上所述就是本文的全部內容了，希望大家能夠喜歡。