137-8593-6100
Flexslider圖片輪播、文字圖片相結合滑動切換效果
來源：百圖 發布時間:2015-06-15 22:35:38 瀏覽： Flexslider是一款基于的jQuery內容滾動插件。它能讓你輕松的創建內容滾動的效果，具有非常高的可定制性。開發者可以使用Flexslider輕松創建各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。
查看演示DEMO下載源碼
Flexslider具有以下特性：
- 支持滑動和淡入淡出效果。
- 支持水平、垂直方向滑動。
- 支持鍵盤方向鍵控制。
- 支持觸控滑動。
- 支持圖文混排，支持各種html元素。
- 自適應屏幕尺寸。
- 可控制滑動單元個數。
- 更多選項設置和回調函數。
HTML
首先在頁面head部位載入jquery庫文件和Flexslider插件，以及Flexslider所需的基本css樣式文件。然后在body中加入以下HTML代碼：
我們使用了.flexslider來包括所有需要滾動的內容元素，然后使用 這個class非常關鍵，內部的滾動內容都是針對.slides的，然后在 內部加入任意html元素，包括圖片和文字。
jQuery
調用Flexslider插件非常簡單，使用如下代碼：$(function() {
$(".flexslider").flexslider();
});
然后預覽網頁效果，一個內容切換效果就完成了，當然想要更多個性化設置，flexslider提供了豐富的選項配置以及回調函數絕對可以滿足大多數開發者需求。
Flexslider選項設置
| 參數 | 描述 | 默認值 |
|---|---|---|
| animation | 動畫效果類型，有"fade"：淡入淡出，"slide"：滑動 | "fade" |
| easing | 內容切換時緩動效果，需要jquery easing插件支持 | "swing" |
| direction | 內容滾動方向，有"horizontal"：水平方向 和"vertical"：垂直方向 | "horizontal" |
| animationLoop | 是否循環滾動 | true |
| startAt | 初始滑動時的起始位置，定位從第幾個開始滑動 | 0 |
| slideshow | 是否自動滑動 | true |
| slideshowSpeed | 滑動內容展示時間(ms) | 7000 |
| animationSpeed | 內容切換時間(ms) | 600 |
| initDelay | 初始化時延時時間 | 0 |
| pauseOnHover | 鼠標滑向滾動內容時，是否暫停滾動 | false |
| touch | 是否支持觸摸滑動 | true |
| directionNav | 是否顯示左右方向箭頭按鈕 | true |
| keyboard | 是否支持鍵盤方向鍵操作 | true |
| minItems | 一次最少展示滑動內容的單元個數 | 1 |
| maxItems | 一次最多展示滑動內容的單元個數 | 0 |
| move | 一次滑動的單元個數 | 0 |
| 回調函數 | start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){}, |
更多Flexslider相關信息可以訪問Flexslider官網地址： http://www.woothemes.com/flexslider/
核心文件下載地址：點擊下載
內容源于網絡，如有侵權或違規我們會盡快整改
相關文章
據說以下服務有助于您的企業發展
幫助中心
- 讓array_column()函數兼容低版本PHP，二位數組按照某個字段排序
- 阿里云centos無法使用yum update更新問題記錄
- swfupload xss漏洞修復方式
- PHPCMS V9 漏洞修補總結
- 網站域名如何實名認證？
文章點擊排行
聯系我們
電子郵件：ser@bytul.com
微信掃描關注 百圖企服
