137-8593-6100
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/

核心文件下載地址:點擊下載

內容源于網絡,如有侵權或違規我們會盡快整改

相關文章

宝星棋牌代理 宁夏11选5跨度走势图 重庆百变王牌走势图1oo期 澳洲幸运5时时彩app 竞彩篮球大小分赚钱 连码三全中是什么意思 bg真人有假吗 江苏7位数怎么中奖 贵州11选5任5预选号 ds真人游戏都是骗人的 ag真人视讯可以作假吗 山东11选5守号技巧 天津快乐10分钟 内蒙古快3今天的预测 广东快乐十分组选3复式 澳洲幸运10开奖记录查询官网 澳门BBIN真人娱乐