輪播外掛--Flexslider圖片輪播、文字圖片相結合滑動切換效果
Flexslider是一款基於的jQuery內容滾動外掛。它能讓你輕鬆的建立內容滾動的效果,具有非常高的可定製性。開發者可以使用Flexslider輕鬆建立各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。
Flexslider具有以下特性:
- 支援滑動和淡入淡出效果。
- 支援水平、垂直方向滑動。
- 支援鍵盤方向鍵控制。
- 支援觸控滑動。
- 支援圖文混排,支援各種html元素。
- 自適應螢幕尺寸。
- 可控制滑動單元個數。
- 更多選項設定和回撥函式。
HTML
首先在頁面head部位載入jquery庫檔案和Flexslider外掛,以及Flexslider所需的基本css樣式檔案。
<link rel="stylesheet" type="text/css" href="flexslider.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>
然後在body中加入以下HTML程式碼:
<div class="flexslider">
<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>
我們使用了.flexslider來包括所有需要滾動的內容元素,然後使用<ul class="slides">這個class非常關鍵,內部的滾動內容都是針對.slides的,然後在<li>內部加入任意html元素,包括圖片和文字。
jQuery
呼叫Flexslider外掛非常簡單,使用如下程式碼:
$(function() {
$(".flexslider").flexslider();
});
然後預覽網頁效果,一個內容切換效果就完成了,當然想要更多個性化設定,flexslider提供了豐富的選項配置以及回撥函式絕對可以滿足大多數開發者需求。
Flexslider選項設定
引數 | 描述 | 預設值 |
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(){}, |
- |
相關推薦
輪播外掛--Flexslider圖片輪播、文字圖片相結合滑動切換效果
Flexslider是一款基於的jQuery內容滾動外掛。它能讓你輕鬆的建立內容滾動的效果,具有非常高的可定製性。開發者可以使用Flexslider輕鬆建立各種圖片輪播效果、焦點圖效果、圖文混排滾動效果。 Flexslider具有以下特性: 支援滑動和淡入淡出效果
Flexslider插件實現圖片輪播、文字圖片相結合滑動切換效果
remove 12px body 類型 ons art cal 選項 csharp 插件下載: 點擊下載 密碼: fbeg Flexslider具有以下特性: 支持滑動和淡入淡出效果。 支持水平、垂直方向滑動。 支持鍵盤方向鍵控制。 支持觸控滑動。 支
springmvc圖片上傳、jquery 圖片上傳預覽
寬為限 緊用功 功夫到 滯塞通 簡介 專案需求,需要做圖片上傳功能,圖片上傳肯定得給個預覽嘛,然後就找了下面這個方案 ajaxfileupload外掛上傳 ajaxfileupload.js網上傳了好幾個版本,選擇自己可以使用的就好了。這個外掛是N多
Toast顯示文字、圖片、文字+圖片
1、顯示文字:Toast.makeText(this, "文字顯示", Toast.LENGTH_LONG).show();2、顯示圖片: Toast toast = new Toast(this);
ios UIButton 熱區範圍、文字圖片位置等拓展類實現
專案開發中,經常會遇到,按鈕範圍太小,點不到按鈕,導致體驗效果變差的情況.此時,可以給按鈕設定個拓展類,來設定按鈕的點選範圍.解決這一問題! 1.按鈕熱區範圍: #import <UIKit/UIKit.h> @interface UIBu
FileUpLoad圖片預覽、儲存圖片到資料庫
public partial class GetImage : System.Web.UI.Page{ protected OleDbConnection connection; protected OleDbCommand cmd; protected OleDbDataAdapter d
原生JS實現移動端模組的左右滑動切換效果,基於vue、stylus
原生JS實現移動端模組的左右滑動動畫效果,基於vue、stylus 大概實現方案: 手指touch螢幕的整個過程,會派發touchstart、touchmove、touchend三個事件,對這三個事件設定相應函式,通過移動過程中位置的變化計算出偏移值,進行對應的設定。 注:
Android中實現類似探探中圖片左右滑動切換效果
偶然之間發現探探的左右滑動的圖片挺好玩,試著去做了下,再到後來,看到許多大神也推出了同樣仿探探效果的部落格,從頭到尾閱讀下來,寫得通俗易懂,基本上沒什麼問題。於是,實現仿探探效果的想法再次出現在腦海中。那麼,還猶豫什麼,趁熱來一發吧!就這麼愉快地決定了。
flexSlider 圖片輪播外掛的使用(附引數設定)
animation: "slide", // String: ["fade"|"slide"],動畫效果 easing: "swing", // String: 滾動動畫計時函式 direction: "horizontal",
【微信小程序】獲取輪播圖當前圖片下標、滑動展示對應的位數、點擊位數展示對應圖片
set spec get auto mage cover 切換圖片 gevent 自動播放 業務需求: 3個圖片輪番播放,可以左右滑動,點擊指示點可以切換圖片 index.wxml: 這裏使用小程序提供的<swiper>組件autoplay:自動播放inter
Flexslider圖片輪播
Flexslider具有以下特性: 支援滑動和淡入淡出效果。 支援水平、垂直方向滑動。 支援鍵盤方向鍵控制。 支援觸控滑動。 支援圖文混排,支援各種html元素。 自適應螢幕尺寸。 可控制滑動單元個數。 更多選項設定和回撥函式。 HTML 首先在頁面head部位載入jquery庫檔案和Fle
兩款響應式的圖片輪播外掛 rem字型設定
輪播:1http://www.w3cways.com/1796.html 輪播2:http://www.w3cways.com/1542.html rem字型設定;http://www.w3cways.com/1713.html 向上滑動效果:http://www.w3c
自定義外掛實現網易雲音樂首頁圖片輪播
編寫html介面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>網易雲音樂
swiper圖片輪播外掛
一、swiper簡介 實現圖片輪播的幻燈片的效果的外掛有很多,如touchsiler,Swiper,silerbox等等,各有獨自的API和自定義效果。下面要說的是關於swiper的使用。 Swiper 是一款免費以及輕量級的移動裝置觸控滑塊的js框架,使用硬
一個簡單的jquery圖片輪播外掛
前提佈局: 左浮li標籤,支援左右切換,自動輪播,原始碼: 引數:ul: 需要動畫的ul prev:上一個切換按鈕 next: 下一個切換按鈕function rotation(ul, prev, next) { var li = $(ul).find("li
vue.js中使用swiper外掛實現圖片輪播
第一步:安裝swiper:npm install [email protected] --save-dev 完成之後,你會在專案的node_modules資料夾中多一個swiper資料夾。 第二步:引用元件 import Swiper from 'swiper
五滴水:使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播
前言嘚吧嘚 三天沒更博了,嘻嘻嘻打自己:3 最近的狀態比開始的時候好太多,能看懂cygwin和console上報的錯誤了,知道到底是縮進出了問題還是我的程式碼邏輯不完整了,找資源也知道哪裡是我要的,也可以找到想要的了·······慢慢來,給自己立個flag :
安卓首頁圖片輪播效果(淘寶、京東首頁廣告效果)
直奔主題: 1、主要原理就是利用定時任務器定時切換ViewPager的頁面。 2、裡面用了一個讀取網路圖片的外掛,做客戶端使用本地圖片輪播的也很少。 先上個效果圖: 專案程式碼結構截圖: 自定義View 的佈局檔案layout_slideshow.xml: &l
15個超強的jQuery/HTML5圖片輪播外掛
最近我們為大家分享過不少基於jQuery的圖片輪播外掛,當然也有很多使用了HTML5和CSS3的相關技術,讓整個圖片播放器顯得更加美觀,動畫效果顯得更加炫酷。這次我們特意為大家篩選了一些最新的jQuery/HTML5圖片輪播外掛,每一個的功能都比較強大,當然可能
Android 廣告(banner)圖片輪播、圖片瀏覽、仿微信大圖檢視控制元件(支援視訊和gif圖片)、支援動態新增資料
之前專案需要做個仿微信檢視大圖,需要新增圓形下載進度,支援視訊和圖片切換等一系列功能控制元件,自己抽空把開發的自定義控制元件的成果重新構造、整理處理封裝成庫(aar),提供出來,有需要朋友,歡迎使用,如果有什麼建議歡迎留言或者GitHub上提issues