Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近博主在項(xiàng)目中用到一款輪播組件，功能齊全，可以設(shè)置各種標(biāo)題樣式、動(dòng)畫(huà)效果、輪播時(shí)間、開(kāi)始暫停等功能，在此推薦給大家，供大家參考。
一、效果展示
多說(shuō)無(wú)益，來(lái)看一組效果展示圖，感受一下！
1、先跟大家見(jiàn)個(gè)面，打個(gè)招呼
2、什么？切換太慢了？好，加快速度！
3、加入其他功能
4、圖片太小，看不出效果？好，那來(lái)個(gè)大圖感受下！
5、如果你不想要右上角的小圖標(biāo)，照樣可以。
6、如果你對(duì)上述滑動(dòng)效果不滿(mǎn)意，組件提供了其他幾種圖片切換方式
淡入淡出
水平滑動(dòng)
7、再來(lái)一張圖片定位
二、組件介紹
Orbit是一款github上面的開(kāi)源組件，需要jquery的支持，開(kāi)源地址。
三、代碼示例
它的使用也是相當(dāng)簡(jiǎn)單，首先下載源碼，引用需要的組件到頁(yè)面里面來(lái)。
<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>
這都是固定結(jié)構(gòu)，div里面的id="featured"用于初始化組件
最后js初始化
<script type="text/javascript">
$(function () {
$('#featured').orbit();
});
</script>
以上簡(jiǎn)單代碼就完成了上述實(shí)例圖片3的效果。是不是很easy!
1、初始化常用屬性介紹
上述通過(guò)簡(jiǎn)單的代碼就可以完成我們組件的初始化，其實(shí)初始化方法 $('#featured').orbit(); 并不是固定，它可以傳入多個(gè)參數(shù)，實(shí)現(xiàn)不同的輪播效果。由于該組件文檔并不是非常齊全，這些屬性都是通過(guò)查看源碼找到的，以下博主就根據(jù)自己的一些嘗試和理解介紹一些常用的初始化屬性。
advanceSpeed屬性用于設(shè)置圖片的切換時(shí)間，默認(rèn)值是4000，單位是毫秒。
timer屬性用于控制是否啟動(dòng)開(kāi)始暫停功能，就是我們右上角的那個(gè)小圖標(biāo)，原來(lái)就是通過(guò)它來(lái)控制的。默認(rèn)true（開(kāi)啟）。
animation屬性用于控制圖片切換的動(dòng)畫(huà)效果，可用的選項(xiàng)有fade（淡入）, horizontal-slide（垂直滑動(dòng)）, vertical-slide（水平滑動(dòng)）, horizontal-push, vertical-push總共5種。
captions屬性表示是否啟用圖片標(biāo)題。
captionAnimation屬性用于控制標(biāo)題的切換動(dòng)畫(huà)。
directionalNav屬性控制是否啟用上一頁(yè)、下一頁(yè)按鈕功能。
其他更多初始化屬性可以自行查看源碼：
最終的用法如下：
$('#featured').orbit({
//advanceSpeed: 4000,//圖片切換時(shí)間
//timer:false, //是否啟動(dòng)開(kāi)始暫停功能
//animation: 'fade', //動(dòng)畫(huà)效果：有fade（淡入）, horizontal-slide（垂直滑動(dòng)）, vertical-slide（水平滑動(dòng)）, horizontal-push, vertical-push
//captions: false, //是否啟用標(biāo)題
//captionAnimation: 'slideOpen', //標(biāo)題動(dòng)畫(huà)
//directionalNav: false,//是否啟用上一頁(yè)、下一頁(yè)功能
});
2、組件常用方法和事件解析
除了初始化的屬性之外，組件還提供了多個(gè)事件供我們調(diào)用。查看組件源碼可以看到如下幾句：
這個(gè)表示給當(dāng)前標(biāo)簽綁定了上述一些事件。我們?nèi)绾问褂盟鼈兡?。比如上文博主使用的定位圖片的功能，我們可以這么寫(xiě)。
$("#featured").trigger('orbit.goto', 3);//定位到第四張圖片。注意這里的索引是從0開(kāi)始。
$('#featured').trigger('orbit.stop');//停止圖片輪詢(xún)
$('#featured').trigger('orbit.start');//啟用圖片輪詢(xún)
當(dāng)然，還有他們的像orbit.next、orbit.prev這些事件應(yīng)該也很好理解，就表示切換到下一張和上一張圖片。
以上所述是小編給大家介紹的Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
js loading加載效果實(shí)現(xiàn)代碼，這個(gè)是在asp.net下的輸出j代碼，實(shí)現(xiàn)頁(yè)面加載效果。2009-11-11
利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件詳解
“工欲善其事，必先利其器” 恩，這句話(huà)我覺(jué)得說(shuō)的特別有道理，下面這篇文章主要給大家介紹了關(guān)于利用chrome瀏覽器進(jìn)行js調(diào)試并找出元素綁定的點(diǎn)擊事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了JS如何生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
js實(shí)現(xiàn)GIF動(dòng)圖分解成多幀圖片上傳
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)GIF動(dòng)圖分解成多幀圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)示例代碼
這篇文章主要給大家介紹了關(guān)于如何使用Three.js實(shí)現(xiàn)太陽(yáng)系八大行星的自轉(zhuǎn)公轉(zhuǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
算法是計(jì)算機(jī)算法即計(jì)算機(jī)能夠執(zhí)行的算法,只有明確了算法后,才能使應(yīng)用程序?qū)崿F(xiàn)某些功能,所以通常人們會(huì)將算法稱(chēng)為程序的靈魂,下面這篇文章主要給大家分享介紹了一些超實(shí)用的JS常用算法的相關(guān)資料,需要的朋友可以參考下2022-10-10
Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
ES6 Class中實(shí)現(xiàn)私有屬性的一些方法總結(jié)
這篇文章主要給大家介紹了關(guān)于ES6 Class中實(shí)現(xiàn)私有屬性的一些方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JavaScript實(shí)現(xiàn)簡(jiǎn)單日期特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單日期特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScript函數(shù)中關(guān)于valueOf和toString的理解
本文給大家介紹JavaScript函數(shù)中關(guān)于valueOf和toString的理解，簡(jiǎn)單的說(shuō)就是需要轉(zhuǎn)換為字符串時(shí)，會(huì)調(diào)用toString，需要轉(zhuǎn)換為數(shù)字時(shí)需要調(diào)用valueOf。對(duì)js valueof tostring知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-06-06