flexslider 轮播图片
生活随笔
收集整理的這篇文章主要介紹了
flexslider 轮播图片
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
FlexSlider
一個(gè)很棒的，響應(yīng)能力強(qiáng)的jQuery滑塊工具包。- 簡(jiǎn)單的語(yǔ)義標(biāo)記
- 所有主要瀏覽器均支持
- 水平/垂直滑動(dòng)和淡入淡出動(dòng)畫
- 多個(gè)滑桿支持，回調(diào)API等
- 硬件加速的觸摸滑動(dòng)支持
- 自定義導(dǎo)航選項(xiàng)
- 與最新版本的jQuery兼容
通過(guò)3個(gè)簡(jiǎn)單的步驟開始使用FlexSlider！
步驟1 – 加載js、css文件
<!-- Place somewhere in the <head> of your document --> <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>步驟2 – 添加標(biāo)記
FlexSlider標(biāo)記簡(jiǎn)單明了。首先，從一個(gè)包含元素開始，在此示例中為<div class =“ flexslider”>。然后，創(chuàng)建一個(gè)<ul class =“ slides”>。使用此類非常重要，因?yàn)榛瑝K專門針對(duì)該類。將圖像和您想要的其他任何內(nèi)容放入每個(gè)<li>中，即可開始滾動(dòng)。
<!-- Place somewhere in the <body> of your page --> <div class="flexslider"><ul class="slides"><li><img src="slide1.jpg" /></li><li><img src="slide2.jpg" /></li><li><img src="slide3.jpg" /></li></ul> </div>步驟3 – 接通滾動(dòng)塊
最后，將以下幾行Javascript添加到文檔的<head>中，位于步驟1的鏈接下方。需要$（window）.load（）來(lái)確保在初始化插件之前加載頁(yè)面的內(nèi)容。
<!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() {$('.flexslider').flexslider({animation: "fade", //圖片變換方式：淡入淡出或者滑動(dòng)slideDirection: "horizontal", //圖片設(shè)置為滑動(dòng)式時(shí)的滑動(dòng)方向：左右或者上下slideshow: true, //載入頁(yè)面時(shí)，是否自動(dòng)播放slideshowSpeed: 7000, //自動(dòng)播放速度毫秒animationDuration: 600, //內(nèi)容切換時(shí)間touch: //是否支持觸摸滑動(dòng)directionNav: true, //是否顯示左右控制按鈕controlNav: true, //是否顯示控制菜單keyboardNav: true, //鍵盤左右方向鍵控制圖片滑動(dòng)mousewheel: false, //鼠標(biāo)滾輪控制制圖片滑動(dòng)minItems:1 //一次最少展示滑動(dòng)內(nèi)容的單元個(gè)數(shù) maxItems:0 //一次最多展示滑動(dòng)內(nèi)容的單元個(gè)數(shù) move:0 //一次滑動(dòng)的單元個(gè)數(shù) prevText: "Previous", //String: 上一項(xiàng)的文字nextText: "Next", //String: 下一項(xiàng)的文字pausePlay: false, //Boolean: 是否顯示播放暫停按鈕pauseText: 'Pause', //String: 暫停文字playText: 'Play', //String: 播放文字randomize: false, //Boolean: 是否隨機(jī)幻燈片slideToStart: 0, //Integer: 初始化第一次顯示圖片位置animationLoop: true, //是否循環(huán)滾動(dòng)pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.pauseOnHover: false, //鼠標(biāo)滑向滾動(dòng)內(nèi)容時(shí)，是否暫停滾動(dòng)pauseOnHover: false, //鼠標(biāo)糊上去是否暫停controlsContainer: "", //Selector: be taken.manualControls: "", //自定義控制導(dǎo)航manualControlEvent:"", //String:自定義導(dǎo)航控制觸發(fā)事件:默認(rèn)是click,可以設(shè)定hoverstart: function(){}, //加載第一頁(yè)觸發(fā)before: function(){}, //每個(gè)滾動(dòng)動(dòng)畫開始時(shí)異步觸發(fā)after: function(){}, //每個(gè)滾動(dòng)動(dòng)畫結(jié)束時(shí)觸發(fā)end: function(){} //滾動(dòng)到最后一頁(yè)時(shí)異步觸發(fā)});}); </script>參數(shù)介紹
| namespace | “flex-” | String 前綴字符串，附加到插件生成的所有元素的類中。 |
| selector | “.slides > li” | Selector必須匹配一個(gè)簡(jiǎn)單的模式。’{container} > {slide}’。 |
| animation | “fade” | String控制動(dòng)畫類型"fade"或"slide"。 |
| easing | “swing” | String 確定jQuery過(guò)渡中使用的緩動(dòng)方法。 |
| direction | “horizontal” | String控制動(dòng)畫方向，“horizontal"或"vertical” |
| reverse | false | Boolean 反轉(zhuǎn)動(dòng)畫方向。 |
| animationLoop | true | Boolean 為滑塊提供無(wú)縫的無(wú)限循環(huán)。 |
| smoothHeight | false | Boolean 平滑地動(dòng)畫化滑塊的高度，以適應(yīng)不同高度的幻燈片。 |
| startAt | 0 | Number 滑塊的起始幻燈片，以數(shù)組表示法。 |
| slideshow | true | Boolean 設(shè)置幻燈片放映以使滑塊自動(dòng)動(dòng)畫。 |
| slideshowSpeed | 7000 | Number 設(shè)置幻燈片循環(huán)播放的速度，以毫秒為單位 |
| animationSpeed | 600 | Number 設(shè)置動(dòng)畫的速度，以毫秒為單位 |
| initDelay | 0 | Number 設(shè)置初始化延遲（以毫秒為單位） |
| randomize | false | Boolean 隨機(jī)加載幻燈片順序 |
| pauseOnAction | true | Boolean 與控件元素進(jìn)行交互時(shí)，請(qǐng)暫停幻燈片放映。 |
| pauseOnHover | false | Boolean 將鼠標(biāo)懸停在滑塊上時(shí)暫停幻燈片放映，然后不再懸停時(shí)繼續(xù)播放。 |
| useCSS | true | Boolean Slider將使用CSS3過(guò)渡（如果有） |
| touch | true | Boolean 允許在啟用的設(shè)備上滑動(dòng)滑動(dòng)瀏覽滑塊 |
| video | false | Boolean 將阻止使用CSS3 3D變換，避免出現(xiàn)圖形故障 |
| controlNav | true | Boolean 為每個(gè)幻燈片的分頁(yè)控制創(chuàng)建導(dǎo)航。 |
| customDirectionNav | “” | jQuery Object/Selector 自定義導(dǎo)航標(biāo)記適用的容器。 |
| directionNav | true | Boolean 創(chuàng)建上一個(gè)/下一個(gè)箭頭導(dǎo)航。 |
| prevText | “Previous” | String設(shè)置“上一個(gè)”directionNav項(xiàng)目的文本 |
| nextText | “Next” | String設(shè)置“下一個(gè)”directionNav項(xiàng)目的文本 |
| keyboard | true | Boolean 允許通過(guò)鍵盤的向左/向右鍵瀏覽滑塊。 |
| multipleKeyboard | false | Boolean 允許鍵盤導(dǎo)航影響多個(gè)滑塊。 |
| mousewheel | false | Boolean （相關(guān)性）允許通過(guò)鼠標(biāo)滾輪瀏覽滑塊 |
| pausePlay | false | Boolean 創(chuàng)建暫停/播放元素以控制滑塊的幻燈片顯示。 |
| pauseText | “Pause” | String設(shè)置“暫停”pausePlay項(xiàng)的文本 |
| playText | “Play” | String設(shè)置“播放”pausePlay項(xiàng)的文本 |
| controlsContainer | “” | jQuery Object/Selector 容器中應(yīng)附加導(dǎo)航元素。 |
| manualControls | “” | jQuery Object/Selector定義用于代替動(dòng)態(tài)元素的元素controlNav。 |
| sync | “” | Selector 與另一個(gè)滑塊鏡像在此滑塊上執(zhí)行的操作。 |
| asNavFor | “” | Selector 將滑塊變成另一個(gè)滑塊的縮略圖導(dǎo)航。 |
| itemWidth | 0 | Number 各個(gè)輪播項(xiàng)目的箱型寬度，包括水平邊框和填充。 |
| itemMargin | 0 | Number 輪播項(xiàng)目之間的保證金。 |
| minItems | 0 | Number 可見的輪播項(xiàng)目的最小數(shù)量。 |
| maxItems | 0 | Number 可見輪播項(xiàng)目的最大數(shù)量。 |
| move | 0 | Number 動(dòng)畫中應(yīng)移動(dòng)的輪播項(xiàng)目數(shù)。 |
| start | empty | Function 當(dāng)滑塊加載第一張幻燈片時(shí)觸發(fā)。 |
| before | empty | Function 與每個(gè)滑塊動(dòng)畫異步觸發(fā)。 |
| after | empty | Function 在每個(gè)滑塊動(dòng)畫完成后觸發(fā)。 |
| end | empty | Function 當(dāng)滑塊到達(dá)最后一張幻燈片（異步）時(shí)觸發(fā)。 |
| added | empty | Function 添加幻燈片后觸發(fā)。 |
| removed | empty | Function 移除幻燈片后觸發(fā)。 |
| rtl | false | Boolean 在滑塊中支持RTL功能。 |
| isFirefox | false | Boolean 測(cè)試是否正在使用Firefox瀏覽器。 |
總結(jié)
以上是生活随笔為你收集整理的flexslider 轮播图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 诚通优股获多家评级机构认可，智能选股顺风
- 下一篇： 轮播插件——flexslider