在zblogPHP主題 yunduan 上使用這個輪播幻燈片插件jquery.flexslider.js，分享下使用方法：

這是一款jquery全屏響應式淡入淡出效果輪播圖插件。該輪播圖插件簡單實用，兼容ie8瀏覽器，可以自動切換播放，帶淡入淡出的動畫效果。

FlexSlider - FlexSlider是一個非常出色的jQuery滑動切換插件，它支持所有主流瀏覽器，并有淡入淡出效果。適合所有初級和高級網頁設計師使用。不過很多人都只是使用默認的參數，今天來說說具體的參數來給大家看看！$(window).load(function()?{

$('.flexslider').flexslider({

animation:?"fade",??????????????//String:?Select?your?animation?type,?"fade"?or?"slide"圖片變換方式：淡入淡出或者滑動

slideDirection:?"horizontal",???//String:?Select?the?sliding?direction,?"horizontal"?or?"vertical"圖片設置為滑動式時的滑動方向：左右或者上下

slideshow:?true,????????????????//Boolean:?Animate?slider?automatically?載入頁面時，是否自動播放

slideshowSpeed:?7000,???????????//Integer:?Set?the?speed?of?the?slideshow?cycling,?in?milliseconds?自動播放速度毫秒

animationDuration:?600,?????????//Integer:?Set?the?speed?of?animations,?in?milliseconds動畫淡入淡出效果延時

directionNav:?true,?????????????//Boolean:?Create?navigation?for?previous/next?navigation??(true/false)是否顯示左右控制按鈕

controlNav:?true,???????????????//Boolean:?Create?navigation?for?paging?control?of?each?clide??Note:?Leave?true?for?manualControls?usage是否顯示控制菜單

keyboardNav:?true,??????????????//Boolean:?Allow?slider?navigating?via?keyboard?left/right?keys鍵盤左右方向鍵控制圖片滑動

mousewheel:?false,??????????????//Boolean:?Allow?slider?navigating?via?mousewheel鼠標滾輪控制制圖片滑動

prevText:?"Previous",???????????//String:?Set?the?text?for?the?"previous"?directionNav?item

nextText:?"Next",???????????????//String:?Set?the?text?for?the?"next"?directionNav?item

pausePlay:?false,???????????????//Boolean:?Create?pause/play?dynamic?element

pauseText:?'Pause',?????????????//String:?Set?the?text?for?the?"pause"?pausePlay?item

playText:?'Play',???????????????//String:?Set?the?text?for?the?"play"?pausePlay?item

randomize:?false,???????????????//Boolean:?Randomize?slide?order?是否隨即幻燈片

slideToStart:?0,????????????????//Integer:?The?slide?that?the?slider?should?start?on.?Array?notation?(0?=?first?slide)初始化第一次顯示圖片位置

animationLoop:?true,????????????//Boolean:?Should?the?animation?loop??If?false,?directionNav?will?received?"disable"?classes?at?either?end?是否循環滾動

pauseOnAction:?true,????????????//Boolean:?Pause?the?slideshow?when?interacting?with?control?elements,?highly?recommended.

pauseOnHover:?false,????????????//Boolean:?Pause?the?slideshow?when?hovering?over?slider,?then?resume?when?no?longer?hovering

controlsContainer:?"",??????????//Selector:?Declare?which?container?the?navigation?elements?should?be?appended?too.?Default?container?is?the?flexSlider?element.?Example?use?would?be?".flexslider-container",?"#container",?etc.?If?the?given?element?is?not?found,?the?default?action?will?be?taken.

manualControls:?"",?????????????//Selector:?Declare?custom?control?navigation.?Example?would?be?".flex-control-nav?li"?or?"#tabs-nav?li?img",?etc.?The?number?of?elements?in?your?controlNav?should?match?the?number?of?slides/tabs.自定義控制導航

manualControlEvent:"",??????????//String:自定義導航控制觸發事件:默認是click,可以設定hover

start:?function(){},????????????//Callback:?function(slider)?-?Fires?when?the?slider?loads?the?first?slide

before:?function(){},???????????//Callback:?function(slider)?-?Fires?asynchronously?with?each?slider?animation

after:?function(){},????????????//Callback:?function(slider)?-?Fires?after?each?slider?animation?completes

end:?function(){}???????????????//Callback:?function(slider)?-?Fires?when?the?slider?reaches?the?last?slide?(asynchronous)

});

});

js下載：

HTML：html>

jquery全屏響應式淡入淡出效果輪播圖插件

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

/*?flexslider?*/

.flexslider{position:relative;height:400px;overflow:hidden;background:url(images/loading.gif)?50%?no-repeat;}

.slides{position:relative;z-index:1;}

.slides?li{height:400px;}

.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}

.flex-control-nav?li{display:inline-block;width:14px;height:14px;margin:0?5px;*display:inline;zoom:1;}

.flex-control-nav?a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(images/dot.png)?right?0?no-repeat;cursor:pointer;}

.flex-control-nav?.flex-active{background-position:0?0;}

.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}

.flex-direction-nav?li?a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}

.flex-direction-nav?li?a.flex-prev{left:40px;background:url(images/prev.png)?center?center?no-repeat;}

.flex-direction-nav?li?a.flex-next{right:40px;background:url(images/next.png)?center?center?no-repeat;}

$(document).ready(function(){

$('.flexslider').flexslider({

directionNav:?true,

pauseOnAction:?false,

slideshowSpeed:?3000

});

});

總結

以上是生活随笔為你收集整理的php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js的全部內容，希望文章能夠幫你解決所遇到的問題。

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