1. 程式人生 > >FlexSlider外掛的詳細設定引數(相容PC和移動的輪播圖)

FlexSlider外掛的詳細設定引數(相容PC和移動的輪播圖)

$(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,可以設定hover start: function(){}, //載入第一頁觸發 before: function(){}, //每個滾動動畫開始時非同步觸發 after: function(){}, //每個滾動動畫結束時觸發 end: function(){} //滾動到最後一頁時非同步觸發 }); });
【轉載請註明:李金龍部落格http://www.lijinlong.com/】

相關推薦

FlexSlider外掛詳細設定引數相容PC移動

$(window).load(function() { $('.flexslider').flexslider({ animation: "fade", //圖片變換方式:淡入淡出或者滑動 slideDirection: "horizon

js手寫滑動驗證相容pc移動

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

Mobiscroll的介紹【一款相容PC移動裝置的滑動外掛

  Mobiscroll是一個用於觸控裝置的日期和時間選擇器,它的使用不會改變HTML5、PhoneGap以及混合應用的原生使用者體驗。作為一款jQuery滑動選擇外掛,使用者可以自定義主題樣式,為自己

js面向物件思想封裝拖拽功能,相容pc移動

我們在開發專案過程中,很可能會碰到頁面上某塊需要可以拖拽移動的功能需求,網上已經有不少前輩分享了相關功能的案例,外掛或者程式碼,但是考慮到專案功能需求,我們可能僅需要實現拖拽移動功能就可以,不需要其他功能,而網上很多外掛往往附帶了其他功能需求。這裡筆者僅對拖拽移

bootstrap響應式相容PC移動端圖片無縫滾動效果demo

效果如圖所示: js程式碼部分: /** * Created by Administrator on 2017/9/15. */ (function(){ var firstD

簡單的跑馬燈效果

font script meta 圖片 ive abs height 單單 none 邏輯簡介:想要圖片或者是文字向左移動,那肯定得用到定時器,那麽移動那就必然是距離左邊的left值在改變;核心問題就是通過定時器來改變ul距離left的值;本姑娘就是簡簡單單直直接接,上代碼

CSS3——animation的基礎

ase rect 次數 bsp dir 前端 bic 圖片 out 作為前端剛入門的小菜鳥,只想記錄一下每天的小收獲 對於animation動畫 1.實現動畫效果的組成: (1)通過類似Flash的關鍵幀來聲明一個動畫 (2)在animation屬性中調用關鍵幀聲明的動畫

原生js解決圖片點擊左右切換簡單

邏輯關系 element logs 內容 點擊切換 osi 圖片 width eight 想寫一個綜合性的小案例,主要會運用到數組和判斷以及我前面幾篇博客所復習到的js的知識。今天案例想要實現的效果圖如下圖所示: 效果是:點擊“循環切換”按鈕,那麽“一號”位置的文案就要

jquery實現圖片向左慢慢滑鼠懸停圖片停止

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

BannerImageLoder精簡版

1.首先先在程式中匯入我們要使的依賴 implementation 'com.youth.banner:banner:1.4.9' implementation 'com.nostra13.universalimageloader:universal-image-loade

Banner框架的簡單使用實現

imageArray = new ArrayList<>(); imageArray.add(bean.getData().getGoods().getGoods_img()); imageArray.add(bean.getDat

Android的banner的實現

本文使用了ViewPager來實現輪播圖的功能,輪播的圖片資源來源於網上。 一、思路 1、就是使得ViewPager實現啟動頁來無限的輪播圖片 2、啟動一個定時器來完成自動的輪播效果。 二、寫佈局程式碼 1、我們先是來看一下

仿照小米官網首頁特效js程式碼

最近跟輪播圖槓上了,以前也接觸過這個輪播圖的寫法,但是一般都是用外掛,久而久之就忘記了!昨晚有學習了一下自己寫這個js,雖然是依靠零散的記憶寫出來的,可能自己並未真正理解吧!!!以下是我寫的程式碼:&

工具篇——InfiniteShufflingViewPager用於自動無限

寫程式碼的四點:     1.明確需求。要做什麼?     2.分析思路。要怎麼做?(1,2,3……)     3.確定步驟。每一個思路要用到哪些語句、方法和物件。     4.程式碼實現。用具體的語言程式碼將思路實現出來。學習新技術的四點:     1.該技術是什麼?   

Android組合控制元件無限

android 自定義控制元件 是的,真的是自定義控制元件。 相對於自定義控制元件的控制元件是什麼呢?當然是原生的控制元件啦! 比如說: 1、Button 、TextView 、ImageView 、EditText等(view)。 2、LinearLayout

微信小程式五建立

應用中最常見的就是輪播圖了,今兒個就講講微信小程式中輪播圖的使用 輪播圖,不外乎倆個要素,跳轉連結 和 圖片地址 1. 設定資料 我在 pages/test/test.js中新增如下資料 //test.js //獲取應用例項 var app = getApp() Page(

select設定text的值選中相容iosAndroid基於jquery

  前一段時間改了一個bug,是因為select引起的。當時我沒有仔細看,只是把bug改完了就完事了,今天來總結一下。   首先說option中我們通常會設定value的屬性的,還有就是text值的,請參見下面的HTML程式碼: 1 <select class="sel" name="">

複製程式碼功能相容多種瀏覽器的通用程式碼測試通過相容PC、手機端

 2018-12-8 複製程式碼功能相容多種瀏覽器的通用程式碼測試通過(相容PC、手機端) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

input框設定onKeypress事件只能輸入數字相容火狐IE9

https://segmentfault.com/q/1010000008818447 使用onInput()事件 oninput 是 HTML5 的標準事件,對於檢測 textarea, input:text, input:password 和 input:search

設定檔案的許可權,阻止使用者訪問相容WindowsLinux

最近的一個專案中需要修改本地檔案的許可權,即對其“加鎖”,使得使用者在解鎖之前不能對其訪問,要求在Windows和Linux下都能執行起來。我們都知道,Linux擁有很嚴格很規範的許可權管理,Linux之所以安全,很大原因也是因為它的許可權管理,因此在Linux