Flexslider具有以下特性：

• 支持滑動和淡入淡出效果。
• 支持水平、垂直方向滑動。
• 支持鍵盤方向鍵控制。
• 支持觸控滑動。
• 支持圖文混排，支持各種html元素。
• 自適應屏幕尺寸。
• 可控制滑動單元個數。
• 更多選項設置和回調函數。

HTML

首先在頁面head部位載入jquery庫文件和Flexslider插件，以及Flexslider所需的基本css樣式文件。

?
<link?rel="stylesheet"?type="text/css"?href="flexslider.css"?/>?
<script?type="text/javascript"?src="jquery-1.7.2.min.js"></script>?
<script?type="text/javascript"?src="jquery.flexslider-min.js"></script>?

然后在body中加入以下HTML代碼：

?
<div?class="flexslider">?
??????<ul?class="slides">?
????????<li><img?src="images/s1.jpg"?/></li>?
????????<li><img?src="images/s2.jpg"?/></li>?
????????<li><img?src="images/s3.jpg"?/></li>?
????????<li><img?src="images/s4.jpg"?/></li>?
??????</ul>?
</div>?

我們使用了.flexslider來包括所有需要滾動的內容元素，然后使用<ul class="slides">這個class非常關鍵，內部的滾動內容都是針對.slides的，然后在<li>內部加入任意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/

聲明：本文為轉載文，helloweba.com和作者擁有版權，如需轉載，請注明來源于helloweba.com并保留原文鏈接：http://www.helloweba.com/view-blog-265.html

總結

以上是生活随笔為你收集整理的关于jquery.flexslider-min.js插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。