推薦一款帶暫停功能的輪播元件,不要謝我,我叫紅領巾!
前言:關於輪播元件,那肯定是一搜一大把,實在不行自己寫貌似也不難。最近博主在專案中用到一款輪播元件,功能齊全,可以設定各種標題樣式、動畫效果、輪播時間、開始暫停等功能,在此推薦給大家,供大家參考。相信有你需要的效果。
一、效果展示
多說無益,來看一組效果展示圖,感受一下!
1、先跟大家見個面,打個招呼
2、什麼?切換太慢了?好,加快速度!
3、加入其他功能
4、圖片太小,看不出效果?好,那來個大圖感受下!
5、如果你不想要右上角的小圖示,照樣可以。
6、如果你對上述滑動效果不滿意,元件提供了其他幾種圖片切換方式
淡入淡出
水平滑動
7、最後來個圖片定位
二、元件介紹
Orbit是一款github上面的開源元件,需要jquery的支援,開源地址。
三、程式碼示例
它的使用也是相當簡單,首先下載原始碼,引用需要的元件到頁面裡面來。
<link href="~/Content/orbit-master/orbit-1.3.0.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/orbit-master/jquery.orbit-1.3.0.js"></script>
然後htmll程式碼如下
<div class="container"> <div id="featured"> <img src="/Content/image/Logo/1.jpg" data-caption="#htmlCaption1" /> <img src="/Content/image/Logo/2.jpg" data-caption="#htmlCaption2" /> <img src="/Content/image/Logo/3.jpg" data-caption="#htmlCaption3" /> <img src="/Content/image/Logo/4.jpg" data-caption="#htmlCaption4" /> <img src="/Content/image/Logo/5.jpg" data-caption="#htmlCaption5" /> <img src="/Content/image/Logo/6.jpg" data-caption="#htmlCaption6" /> <img src="/Content/image/Logo/7.jpg" data-caption="#htmlCaption7" /> </div> <!-- Captions for Orbit --> <span class="orbit-caption" id="htmlCaption1"><strong>1</strong></span> <span class="orbit-caption" id="htmlCaption2"><strong>2</strong></span> <span class="orbit-caption" id="htmlCaption3"><strong>3</strong></span> <span class="orbit-caption" id="htmlCaption4"><strong>4</strong></span> <span class="orbit-caption" id="htmlCaption5"><strong>5</strong></span> <span class="orbit-caption" id="htmlCaption6"><strong>6</strong></span> <span class="orbit-caption" id="htmlCaption7"><strong>7</strong></span> </div>
這都是固定結構,div裡面的id="featured"用於初始化元件
最後js初始化
<script type="text/javascript"> $(function () { $('#featured').orbit(); }); </script>
以上簡單程式碼就完成了上述例項圖片3的效果。是不是很easy!
1、初始化常用屬性介紹
上述通過簡單的程式碼就可以完成我們元件的初始化,其實初始化方法 $('#featured').orbit(); 並不是固定,它可以傳入多個引數,實現不同的輪播效果。由於該元件文件並不是非常齊全,這些屬性都是通過檢視原始碼找到的,以下博主就根據自己的一些嘗試和理解介紹一些常用的初始化屬性。
- advanceSpeed屬性用於設定圖片的切換時間,預設值是4000,單位是毫秒。
- timer屬性用於控制是否啟動開始暫停功能,就是我們右上角的那個小圖示,原來就是通過它來控制的。預設true(開啟)。
- animation屬性用於控制圖片切換的動畫效果,可用的選項有fade(淡入), horizontal-slide(垂直滑動), vertical-slide(水平滑動), horizontal-push, vertical-push總共5種。
- captions屬性表示是否啟用圖片標題。
- captionAnimation屬性用於控制標題的切換動畫。
- directionalNav屬性控制是否啟用上一頁、下一頁按鈕功能。
- 其他更多初始化屬性可以自行檢視原始碼:
最終的用法如下:
$('#featured').orbit({ //advanceSpeed: 4000,//圖片切換時間 //timer:false, //是否啟動開始暫停功能 //animation: 'fade', //動畫效果:有fade(淡入), horizontal-slide(垂直滑動), vertical-slide(水平滑動), horizontal-push, vertical-push //captions: false, //是否啟用標題 //captionAnimation: 'slideOpen', //標題動畫 //directionalNav: false,//是否啟用上一頁、下一頁功能 });
2、元件常用方法和事件解析
除了初始化的屬性之外,元件還提供了多個事件供我們呼叫。檢視元件原始碼可以看到如下幾句:
這個表示給當前標籤綁定了上述一些事件。我們如何使用它們呢。比如上文博主使用的定點陣圖片的功能,我們可以這麼寫。
$("#featured").trigger('orbit.goto', 3);//定位到第四張圖片。注意這裡的索引是從0開始。 $('#featured').trigger('orbit.stop');//停止圖片輪詢
$('#featured').trigger('orbit.start');//啟用圖片輪詢
當然,還有他們的像orbit.next、orbit.prev這些事件應該也很好理解,就表示切換到下一張和上一張圖片。
四、總結
好了,很簡單的一個東西,這裡就介紹完了,希望對你有用。
如果你覺得本文能夠幫助你,可以右邊隨意 打賞 博主,也可以 推薦 進行精神鼓勵。你的支援是博主繼續堅持的不懈動力。
歡迎各位轉載,但是未經作者本人同意,轉載文章之後必須在文章頁面明顯位置給出作者和原文連線,否則保留追究法律責任的權利
相關推薦
推薦一款帶暫停功能的輪播元件,不要謝我,我叫紅領巾!
前言:關於輪播元件,那肯定是一搜一大把,實在不行自己寫貌似也不難。最近博主在專案中用到一款輪播元件,功能齊全,可以設定各種標題樣式、動畫效果、輪播時間、開始暫停等功能,在此推薦給大家,供大家參考。相信有你需要的效果。 一、效果展示 多說無益,來看一組效果展示圖,感受一下! 1、先跟大家見個面,打個招
JS元件系列——再推薦一款好用的bootstrap-select元件,親測還不錯
前言:之前分享過兩篇bootstrap下拉框的元件:JS元件系列——兩種bootstrap multiselect元件大比拼 和 JS元件系列——Bootstrap Select2元件使用小結 ,收到很多園友的關注和提問,最後總結這兩篇裡面的下拉框元件都存在一些大大小小的問題,比如兩種bootstrap m
一款輪播元件的誕生
1. 前言 早在幾個月前,就想自己動手寫個輪播圖元件,因此也看了許多文章,斷斷續續過了幾個月,今天終於有時間騰出手來給此外掛做個總結,因此有了這篇文章。話不多說,先上 Demo, 效果如下: 2. HTML and CSS 本文不討論html,css的實現方式,直接貼上程式
推薦一款華為最新的自動化代碼檢查工具
簡化 htm 獲得 修煉 product pos java 事情 是的 作為一枚軟件攻城獅,你是不是總覺得自己擼代碼的能力還有待提高卻又無從下手?你是不是看到過XX大神美輪美奐的代碼,然後佩服的五(ren)體(yang)投(ma)地(fan),然後躲在暗房裏哭。然後你下定決
JS原生帶小白點輪播圖
adding 完成 ext == 毫秒 oat auto margin add 咱們剛剛說了js原生輪播圖,現在給他加上可以隨著一起走動的小圓點吧! css代碼: *{ margin:0px; padding: 0px; } ul{ widt
【下載】推薦一款免費的人臉識別SDK
firefly linux rk3399 ubuntu 開源硬件 人臉識別 現已進入刷臉的時代,例如,人臉支付、人臉識別的門禁、人流監控等等。如何在Firefly開源板上快速搭建DEMO,並快速產品化?為了讓更多產品可以用上人臉識別技術,Firefly推出了一款高性能人臉識別
推薦一款程序員常用的web前端框架
的人 image 單元 jquer 技術分享 幫助 元素 的確 復雜 不知道現在大家使用的web前端框架都是什麽?也許有人和我一樣會想到jQuery,但今天給大家介紹的確實另外一款比較受歡迎的web前端框架,把我用的體驗和大家分享一下,希望這款web前端框架能夠被大
推薦一款可以下載愛奇藝視頻的chrome插件(親測可用)
測試的 技術 可用 plugin video 下載安裝 檢測 sans chrom 事件起因:萬聖節就要到了,想要借此機會跟小朋友分享一些halloween的知識,於是尋找到一首knock knock trick or treat的英文歌曲視頻。這樣好的視頻當然要下載到電視
推薦一款不錯的偽原創工具
偽原創 偽原創檢測偽原創工具 偽原創是指把一篇原創的文章進行再加工,使其讓搜索引擎認為是一篇原創文章,從而提高網站權重。編輯方法有修改標題是關鍵和首尾段落總結兩種。 分別指數字替換法、詞語替換法、文字排序法、首段總結法、尾部總結法、新增加圖片、段落替換法、關鍵詞替換添加法。 所謂偽原創就是對一篇原創文章
推薦一款思維導圖軟件(MindMaster)
ast 推薦 span 軟件 edr 路線圖 工作 一起 思維導圖 下載該軟件:http://www.edrawsoft.cn/mindmaster/思維導圖的作用?1、增強使用者的超強記憶能力2、增強使用者的立體思維能力(思維的層次性與聯想性)3、增強使用者的總體規劃能力
軟件推薦 ---一款優秀的通信組件 HP_Socket
.text 連接 tar .com mar ive enc .get ram * HP-Socket 官方網站:http://www.jessma.org* HP-Socket 項目主頁:http://www.oschina.net/p/hp-socket* HP-Sock
一款業界領先全能導播軟件VJDirector2
一款業界領先全能導播軟件VJDirect今天小編和他家分享一款業界領先全能導播軟件VJDirector2,是新聞媒體,教育和體育的行業的首選,有興趣的朋友可以了解一下. VJDirector2(納加軟件切換臺字幕機系統)是一款用於現場實況直播、網絡直播、視頻制作的全能化采編錄播軟件,在廣電、教育、體育、視頻制
推薦一款編輯SQL的工具:jsqlparser
for git 更強 追加 In 操作性 IT 很多 而是 這個工具真的挺好用的,采用的是觀察者模式,Visitor。 雖然我學過這個模式,但是乍一用還是有點懵逼的。 給好一個SQL語句之後,jsqlparser可以把這個sql語句給分解成all kind of par
推薦一款優雅的日歷控件
height tex lse 根據 樣式 else if parent decode 更多 原文鏈接:https://mp.weixin.qq.com/s/SmxDiWIidHS2hwVvFcz_hw 項目需要用到日歷控件,這是我們的效果圖。 去github上搜了一哈
給大夥推薦一款全自動加密軟件-密信MeSince
解密 釣魚郵件 第三方認證 證書 ios 自動添加 發件人 加密軟件 識別 密信(MeSince)是一個免費的安全電子郵件客戶端,無縫支持證書加密郵件,采用S/MIME國際標準,使用數字證書自動簽名加密每一封郵件,確保郵件內容全程安全、發件人身份真實可信,防止機密郵件泄
每次移一張圖片的無縫輪播圖
end 3.0 doctype () 定時 ora title order console <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
推薦一款MongoDB的客戶端管理工具--nosqlbooster
技術分享 sms def 方式 rip tab tor error 好用 今天給大家推薦一款MongoDB的客戶端工具--nosqlbooster,這個也是我工作中一直使用的連接管理MongoDB的工具。這個工具還有個曾用名--mongobooster。nosqlboost
推薦一款智慧黑科技微信小程式,簡直不要太良心!
生活中我們會經常用到微信,但是你們知道微信除了用來聊天,裡面的小程式功能也是十分強大的,今天推薦的這款小程式的名字叫做多媒體AI平臺。裡面提供了多種智慧AI能力,不僅能學習還能解決很多生活中的小問題。 我們點開我們的小程式,搜尋“多媒體AI平臺” 這裡面與很多的黑科技應用,裡面的內容識
Vue元件(一)——Swiper輪播元件
Vue輪播元件,詳情參見: awesome-swiper vue專案中安裝awsome-swiper元件: npm install [email protected] --save&
推薦一款hosts檔案管理工具—SwitchHosts
前言 SwitchHosts是一個管理、快速切換Hosts小工具,開源軟體,一鍵切換Hosts配置,非常實用,高效。 開發Web過程成,部署有多套環境,網址域名都相同,部署在不同的伺服器上,有開發環境、測試環境、預釋出環境、生產環境。經常要切換Hosts來訪問,測試以及驗證bug,如果純手工修改