轉(zhuǎn)自：https://www.cnblogs.com/junhaoliu/p/6084281.html

FlexSlider插件的詳細設(shè)置參數(shù)

Flexslider具有以下特性：

支持滑動和淡入淡出效果。

支持水平、垂直方向滑動。

支持鍵盤方向鍵控制。

支持觸控滑動。

支持圖文混排，支持各種html元素。

自適應(yīng)屏幕尺寸。

可控制滑動單元個數(shù)。

更多選項設(shè)置和回調(diào)函數(shù)。

HTML
　　在head部分載入jquery庫文件和Flexslider插件，以及Flexslider所需的基本css樣式文件

<link href="//cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script> <script src="//cdn.bootcss.com/flexslider/2.6.3/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來包括所有需要滾動的內(nèi)容元素，然后使用<ul class="slides">這個class非常關(guān)鍵，內(nèi)部的滾動內(nèi)容都是針對.slides的，然后在<li>內(nèi)部加入任意　　html元素，包括圖片和文字。

jQuery

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

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

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

Flexslider選項設(shè)置：

$(window).load(function() {$('.flexslider').flexslider({animation: "fade", //圖片變換方式：淡入淡出或者滑動slideDirection: "horizontal", //圖片設(shè)置為滑動式時的滑動方向：左右或者上下slideshow: true, //載入頁面時，是否自動播放slideshowSpeed: 7000, //自動播放速度毫秒animationDuration: 600, //內(nèi)容切換時間touch: //是否支持觸摸滑動directionNav: true, //是否顯示左右控制按鈕controlNav: true, //是否顯示控制菜單keyboardNav: true, //鍵盤左右方向鍵控制圖片滑動mousewheel: false, //鼠標滾輪控制制圖片滑動minItems:1 //一次最少展示滑動內(nèi)容的單元個數(shù) maxItems:0 //一次最多展示滑動內(nèi)容的單元個數(shù) move:0 //一次滑動的單元個數(shù) prevText: "Previous", //String: 上一項的文字nextText: "Next", //String: 下一項的文字pausePlay: false, //Boolean: 是否顯示播放暫停按鈕pauseText: 'Pause', //String: 暫停文字playText: 'Play', //String: 播放文字randomize: false, //Boolean: 是否隨機幻燈片slideToStart: 0, //Integer: 初始化第一次顯示圖片位置animationLoop: true, //是否循環(huán)滾動pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.pauseOnHover: false, //鼠標滑向滾動內(nèi)容時，是否暫停滾動pauseOnHover: false, //鼠標糊上去是否暫停controlsContainer: "", //Selector: be taken.manualControls: "", //自定義控制導(dǎo)航manualControlEvent:"", //String:自定義導(dǎo)航控制觸發(fā)事件:默認是click,可以設(shè)定hoverstart: function(){}, //加載第一頁觸發(fā)before: function(){}, //每個滾動動畫開始時異步觸發(fā)after: function(){}, //每個滾動動畫結(jié)束時觸發(fā)end: function(){} //滾動到最后一頁時異步觸發(fā)}); });

?

總結(jié)

以上是生活随笔為你收集整理的FlexSlider 轮播图插件 的详细设置参数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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