效果最好的焦點圖幻燈片jQuery插件Skippr
史上效果最好的焦點圖幻燈片jQuery插件Skippr,輕量級插件、響應式布局插件,強大的參數自定義配置,可自定義切換速度、切換方式、是否顯示左右箭頭、是否自動播放、自動播放間隔時間等配置參數,調用插件也非常
史上效果最好的焦點圖幻燈片jQuery插件Skippr,輕量級插件、響應式布局插件,強大的參數自定義
配置,可自定義切換速度、切換方式、是否顯示左右箭頭、是否自動播放、自動播放間隔時間等配置
參數,調用插件也非常簡單易用,調用方式下面介紹下:
1.加載jQuery和插件
2.HTML內容
transition :(fade/slide)切換方式
speed : 切換速度(毫秒)
easing :切換效果(easeOutQuart)
navType :下面導航類型(block/bubble)
arrows :是否有箭頭(true/false)
autoPlay :是否自動播放(true/false)
autoPlayDuration : 自動播放間隔(毫秒)
keyboardOnAlways :是否支持鍵盤切換(true/false)
hidePrevious :是否隱藏第一張已經切換后的箭頭(true/false)
配置,可自定義切換速度、切換方式、是否顯示左右箭頭、是否自動播放、自動播放間隔時間等配置
參數,調用插件也非常簡單易用,調用方式下面介紹下:
- "stylesheet" href="css/jquery.skippr.css">
- <script src=></script>
- <script src=></script>
2.HTML內容
3.函數調用
- <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>
參數配置解釋
- <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)
相關內容
這些是最新的
熱門關鍵詞
AE軟件 返回頂部 js模塊拖動 jQuery表單美化 偽靜態 標簽云 AdSense 彩色粉筆 js客服代碼 滾動表格 綠色版 翻頁效果 帝國CMS 交互式透明工具 slicebox Retina RangeSlider 指定位置 CSS3美化 觸摸 wamp5 頁面設計 PIGCMS 首字母轉換成大寫 vba代碼 左右滾動 百度 幻燈片配音 jQuery編輯器 圖片放大鏡熱門排行
- 手機網站WebApp頁面布局JS UI 框架App.js
- 基于Bootstrap改造的國產前端框架 H-ui
- 漂亮jQuery 3D動畫圖片輪播切換特效插件jquery.slicebox.js
- 文字橫向不間斷滾動js代碼
- 一款圖片彈出層相冊jQuery插件for jQuery or Zepto.js
- jQuery響應式手機端移動端幻燈片圖片切換特效插件slick
- jQuery刮刮卡特效插件jQuery.eraser
- 非常優秀響應式jQuery焦點圖插件bxSlider
- 實用jQuery分頁特效插件jquery.pagination.js
- 實用的jQuery網頁元素固定導航置頂插件StickUp