Flexslider具有以下特性：

• 支持滑動(dòng)和淡入淡出效果。
• 支持水平、垂直方向滑動(dòng)。
• 支持鍵盤方向鍵控制。
• 支持觸控滑動(dòng)。
• 支持圖文混排，支持各種html元素。
• 自適應(yīng)屏幕尺寸。
• 可控制滑動(dòng)單元個(gè)數(shù)。
• 更多選項(xiàng)設(shè)置和回調(diào)函數(shù)。

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來包括所有需要滾動(dòng)的內(nèi)容元素，然后使用<ul class="slides">這個(gè)class非常關(guān)鍵，內(nèi)部的滾動(dòng)內(nèi)容都是針對(duì).slides的，然后在<li>內(nèi)部加入任意html元素，包括圖片和文字。

jQuery

調(diào)用Flexslider插件非常簡單，使用如下代碼：

?
$(function()?{?
????$(".flexslider").flexslider();?
});?????

然后預(yù)覽網(wǎng)頁效果，一個(gè)內(nèi)容切換效果就完成了，當(dāng)然想要更多個(gè)性化設(shè)置，flexslider提供了豐富的選項(xiàng)配置以及回調(diào)函數(shù)絕對(duì)可以滿足大多數(shù)開發(fā)者需求。

Flexslider選項(xiàng)設(shè)置

參數(shù)	描述	默認(rèn)值
animation	動(dòng)畫效果類型，有"fade"：淡入淡出，"slide"：滑動(dòng)	"fade"
easing	內(nèi)容切換時(shí)緩動(dòng)效果，需要jquery easing插件支持	"swing"
direction	內(nèi)容滾動(dòng)方向，有"horizontal"：水平方向 和"vertical"：垂直方向	"horizontal"
animationLoop	是否循環(huán)滾動(dòng)	true
startAt	初始滑動(dòng)時(shí)的起始位置，定位從第幾個(gè)開始滑動(dòng)	0
slideshow	是否自動(dòng)滑動(dòng)	true
slideshowSpeed	滑動(dòng)內(nèi)容展示時(shí)間(ms)	7000
animationSpeed	內(nèi)容切換時(shí)間(ms)	600
initDelay	初始化時(shí)延時(shí)時(shí)間	0
pauseOnHover	鼠標(biāo)滑向滾動(dòng)內(nèi)容時(shí)，是否暫停滾動(dòng)	false
touch	是否支持觸摸滑動(dòng)	true
directionNav	是否顯示左右方向箭頭按鈕	true
keyboard	是否支持鍵盤方向鍵操作	true
minItems	一次最少展示滑動(dòng)內(nèi)容的單元個(gè)數(shù)	1
maxItems	一次最多展示滑動(dòng)內(nèi)容的單元個(gè)數(shù)	0
move	一次滑動(dòng)的單元個(gè)數(shù)	0
回調(diào)函數(shù)	start: function(){},? before: function(){}, after: function(){},? end: function(){},? added: function(){},? removed: function(){},? init: function(){},	-

更多Flexslider相關(guān)信息可以訪問Flexslider官網(wǎng)地址：http://www.woothemes.com/flexslider/

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。