簡介

FlexSlider是一個非常出色的jQuery滑動切換插件，它支持所有主流瀏覽器，并有淡入淡出效果。壓縮后只有4KB大小，FlexSlider對于網站開發者來說是一個不錯測JQUERY特效，因為支持全瀏覽器深受中國網站前端開發者的喜愛！它將UL列表轉換成內容滾動的列表，可以自動播放，或者使用導航按鈕和鍵盤來控制。

? ? 使用方法

? ? 1、引入文件

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

2、HTML

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

<ulclass="slides">

<li><imgsrc="images/s1.jpg"/></li>

<li><imgsrc="images/s2.jpg"/></li>

<li><imgsrc="images/s3.jpg"/></li>

<li><imgsrc="images/s4.jpg"/></li>

</ul>

</div>

3、JavaScript

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

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

<scripttype="text/javascript">

$(function(){

$(".flexslider").flexslider({

slideshowSpeed:4000,//展示時間間隔ms

animationSpeed:400,//滾動時間ms

touch:true//是否支持觸屏滑動

});

});

</script>

參數

參數	描述	默認值
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(){},	–

$(window).load(function() {?$('.flexslider').flexslider({? animation: "fade",????????????? //String: "fade" or "slide"圖片變換方式：淡入淡出或者滑動? slideDirection: "horizontal",?? //String: "horizontal" or "vertical"圖片設置為滑動式時的滑動方向：左右或者上下? slideshow: true,??????????????? //Boolean: 載入頁面時，是否自動播放? slideshowSpeed: 7000,?????????? //Integer: 自動播放速度毫秒? animationDuration: 600,???????? //Integer: 動畫淡入淡出效果延時? directionNav: true,???????????? //Boolean: (true/false)是否顯示左右控制按鈕? controlNav: true,?????????????? //Boolean: 是否顯示控制菜單? keyboardNav: true,????????????? //Boolean: 鍵盤左右方向鍵控制圖片滑動? mousewheel: false,????????????? //Boolean: 鼠標滾輪控制制圖片滑動? prevText: "Previous",?????????? //String: "previous" directionNav item? nextText: "Next",?????????????? //String: "next" directionNav item? pausePlay: false,?????????????? //Boolean: Create pause/play dynamic element? pauseText: 'Pause',???????????? //String: "pause" pausePlay item? playText: 'Play',?????????????? //String: "play" pausePlay item? randomize: false,?????????????? //Boolean:是否隨即幻燈片? slideToStart: 0,??????????????? //Integer: (0 = first slide)初始化第一次顯示圖片位置? animationLoop: true,??????????? //Boolean: 是否循環滾動? 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)? ?});});



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

???????????

再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！https://blog.csdn.net/jiangjunshow

總結

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

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