日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

flexslider 轮播图片

發布時間：2023/12/29 编程问答 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 flexslider 轮播图片 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

FlexSlider

一個很棒的，響應能力強的jQuery滑塊工具包。
  • 簡單的語義標記
  • 所有主要瀏覽器均支持
  • 水平/垂直滑動和淡入淡出動畫
  • 多個滑桿支持，回調API等
  • 硬件加速的觸摸滑動支持
  • 自定義導航選項
  • 與最新版本的jQuery兼容

通過3個簡單的步驟開始使用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 – 添加標記

FlexSlider標記簡單明了。首先，從一個包含元素開始，在此示例中為<div class =“ flexslider”>。然后，創建一個<ul class =“ slides”>。使用此類非常重要，因為滑塊專門針對該類。將圖像和您想要的其他任何內容放入每個<li>中，即可開始滾動。

<!-- 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 – 接通滾動塊

最后，將以下幾行Javascript添加到文檔的<head>中，位于步驟1的鏈接下方。需要$（window）.load（）來確保在初始化插件之前加載頁面的內容。

<!-- Place in the <head>, after the three links --> <script type="text/javascript" charset="utf-8">$(window).load(function() {$('.flexslider').flexslider({animation: "fade", //圖片變換方式：淡入淡出或者滑動slideDirection: "horizontal", //圖片設置為滑動式時的滑動方向：左右或者上下slideshow: true, //載入頁面時，是否自動播放slideshowSpeed: 7000, //自動播放速度毫秒animationDuration: 600, //內容切換時間touch: //是否支持觸摸滑動directionNav: true, //是否顯示左右控制按鈕controlNav: true, //是否顯示控制菜單keyboardNav: true, //鍵盤左右方向鍵控制圖片滑動mousewheel: false, //鼠標滾輪控制制圖片滑動minItems:1 //一次最少展示滑動內容的單元個數 maxItems:0 //一次最多展示滑動內容的單元個數 move:0 //一次滑動的單元個數 prevText: "Previous", //String: 上一項的文字nextText: "Next", //String: 下一項的文字pausePlay: false, //Boolean: 是否顯示播放暫停按鈕pauseText: 'Pause', //String: 暫停文字playText: 'Play', //String: 播放文字randomize: false, //Boolean: 是否隨機幻燈片slideToStart: 0, //Integer: 初始化第一次顯示圖片位置animationLoop: true, //是否循環滾動pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.pauseOnHover: false, //鼠標滑向滾動內容時，是否暫停滾動pauseOnHover: false, //鼠標糊上去是否暫停controlsContainer: "", //Selector: be taken.manualControls: "", //自定義控制導航manualControlEvent:"", //String:自定義導航控制觸發事件:默認是click,可以設定hoverstart: function(){}, //加載第一頁觸發before: function(){}, //每個滾動動畫開始時異步觸發after: function(){}, //每個滾動動畫結束時觸發end: function(){} //滾動到最后一頁時異步觸發});}); </script>
參數介紹
屬性默認描述
namespace“flex-”String 前綴字符串，附加到插件生成的所有元素的類中。
selector“.slides > li”Selector必須匹配一個簡單的模式。’{container} > {slide}’。
animation“fade”String控制動畫類型"fade"或"slide"。
easing“swing”String 確定jQuery過渡中使用的緩動方法。
direction“horizontal”String控制動畫方向，“horizontal"或"vertical”
reversefalseBoolean 反轉動畫方向。
animationLooptrueBoolean 為滑塊提供無縫的無限循環。
smoothHeightfalseBoolean 平滑地動畫化滑塊的高度，以適應不同高度的幻燈片。
startAt0Number 滑塊的起始幻燈片，以數組表示法。
slideshowtrueBoolean 設置幻燈片放映以使滑塊自動動畫。
slideshowSpeed7000Number 設置幻燈片循環播放的速度，以毫秒為單位
animationSpeed600Number 設置動畫的速度，以毫秒為單位
initDelay0Number 設置初始化延遲（以毫秒為單位）
randomizefalseBoolean 隨機加載幻燈片順序
pauseOnActiontrueBoolean 與控件元素進行交互時，請暫停幻燈片放映。
pauseOnHoverfalseBoolean 將鼠標懸停在滑塊上時暫停幻燈片放映，然后不再懸停時繼續播放。
useCSStrueBoolean Slider將使用CSS3過渡（如果有）
touchtrueBoolean 允許在啟用的設備上滑動滑動瀏覽滑塊
videofalseBoolean 將阻止使用CSS3 3D變換，避免出現圖形故障
controlNavtrueBoolean 為每個幻燈片的分頁控制創建導航。
customDirectionNav“”jQuery Object/Selector 自定義導航標記適用的容器。
directionNavtrueBoolean 創建上一個/下一個箭頭導航。
prevText“Previous”String設置“上一個”directionNav項目的文本
nextText“Next”String設置“下一個”directionNav項目的文本
keyboardtrueBoolean 允許通過鍵盤的向左/向右鍵瀏覽滑塊。
multipleKeyboardfalseBoolean 允許鍵盤導航影響多個滑塊。
mousewheelfalseBoolean （相關性）允許通過鼠標滾輪瀏覽滑塊
pausePlayfalseBoolean 創建暫停/播放元素以控制滑塊的幻燈片顯示。
pauseText“Pause”String設置“暫停”pausePlay項的文本
playText“Play”String設置“播放”pausePlay項的文本
controlsContainer“”jQuery Object/Selector 容器中應附加導航元素。
manualControls“”jQuery Object/Selector定義用于代替動態元素的元素controlNav。
sync“”Selector 與另一個滑塊鏡像在此滑塊上執行的操作。
asNavFor“”Selector 將滑塊變成另一個滑塊的縮略圖導航。
itemWidth0Number 各個輪播項目的箱型寬度，包括水平邊框和填充。
itemMargin0Number 輪播項目之間的保證金。
minItems0Number 可見的輪播項目的最小數量。
maxItems0Number 可見輪播項目的最大數量。
move0Number 動畫中應移動的輪播項目數。
startemptyFunction 當滑塊加載第一張幻燈片時觸發。
beforeemptyFunction 與每個滑塊動畫異步觸發。
afteremptyFunction 在每個滑塊動畫完成后觸發。
endemptyFunction 當滑塊到達最后一張幻燈片（異步）時觸發。
addedemptyFunction 添加幻燈片后觸發。
removedemptyFunction 移除幻燈片后觸發。
rtlfalseBoolean 在滑塊中支持RTL功能。
isFirefoxfalseBoolean 測試是否正在使用Firefox瀏覽器。

總結

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

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