簡介

FlexSlider是一個(gè)非常出色的jQuery滑動(dòng)切換插件，它支持所有主流瀏覽器，并有淡入淡出效果。 壓縮后只有4KB大小， FlexSlider對于網(wǎng)站開發(fā)者來說是一個(gè)不錯(cuò)測JQUERY特效，因?yàn)橹С秩珵g覽器深受中國網(wǎng)站前端開發(fā)者的喜愛！ 它將UL列表轉(zhuǎn)換成內(nèi)容滾動(dòng)的列表，可以自動(dòng)播放，或者使用導(dǎo)航按鈕和鍵盤來控制。
? ? ? ??

? ? 使用方法

? ? ?

? ? 1、引入文件

<link rel="stylesheet" type="text/css" href="css/flexslider.css"/>

2、HTML

<div class="flexslider" style="width:500px;margin-left:110px;">

<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>

3、JavaScript

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript"src="js/jquery.flexslider-min.js"></script>

<script type="text/javascript">

$(function(){

$(".flexslider").flexslider({

slideshowSpeed:4000,//展示時(shí)間間隔ms

animationSpeed:400,//滾動(dòng)時(shí)間ms

touch:true//是否支持觸屏滑動(dòng)

});

});

</script>

參數(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(){},	–

$(window).load(function() {$('.flexslider').flexslider({animation: "fade", //String: "fade" or "slide"圖片變換方式：淡入淡出或者滑動(dòng)slideDirection: "horizontal", //String: "horizontal" or "vertical"圖片設(shè)置為滑動(dòng)式時(shí)的滑動(dòng)方向：左右或者上下slideshow: true, //Boolean: 載入頁面時(shí)，是否自動(dòng)播放slideshowSpeed: 7000, //Integer: 自動(dòng)播放速度毫秒animationDuration: 600, //Integer: 動(dòng)畫淡入淡出效果延時(shí)directionNav: true, //Boolean: (true/false)是否顯示左右控制按鈕controlNav: true, //Boolean: 是否顯示控制菜單keyboardNav: true, //Boolean: 鍵盤左右方向鍵控制圖片滑動(dòng)mousewheel: false, //Boolean: 鼠標(biāo)滾輪控制制圖片滑動(dòng)prevText: "Previous", //String: "previous" directionNav itemnextText: "Next", //String: "next" directionNav itempausePlay: false, //Boolean: Create pause/play dynamic elementpauseText: 'Pause', //String: "pause" pausePlay itemplayText: 'Play', //String: "play" pausePlay itemrandomize: false, //Boolean:是否隨即幻燈片slideToStart: 0, //Integer: (0 = first slide)初始化第一次顯示圖片位置animationLoop: true, //Boolean: 是否循環(huán)滾動(dòng)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 hoveringcontrolsContainer: "", //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.自定義控制導(dǎo)航manualControlEvent:"", //String: 自定義導(dǎo)航控制觸發(fā)事件:默認(rèn)是click,可以設(shè)定hoverstart: function(){}, //Callback: function(slider) - Fires when the slider loads the first slidebefore: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animationafter: function(){}, //Callback: function(slider) - Fires after each slider animation completesend: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)}); });



演示：http://www.ijquery.cn/demo/flexslider/index.html

總結(jié)

以上是生活随笔為你收集整理的FlexSlider.js——轮播的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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