原文發(fā)布地址：https://zhuanlan.zhihu.com/p/23747456?refer=dreawer

前言：關(guān)于輪播組件，那肯定是一搜一大把，實在不行自己寫貌似也不難。最近博主在項目中用到一款輪播組件，功能齊全，可以設(shè)置各種標題樣式、動畫效果、輪播時間、開始暫停等功能，在此推薦給大家，供大家參考。相信有你需要的效果。

一、效果展示

多說無益，來看一組效果展示圖，感受一下！
1、先跟大家見個面，打個招呼

插件效果預(yù)覽

2、什么？切換太慢了？好，加快速度！

加快速度

3、加入其他功能

加入其他功能

4、圖片太小，看不出效果？好，那來個大圖感受下！

大圖預(yù)覽

5、如果你不想要右上角的小圖標，照樣可以。

去掉小圖標

6、如果你對上述滑動效果不滿意，組件提供了其他幾種圖片切換方式

淡入淡出

淡入淡出

水平滑動

水平滑動

7、再來一張圖片定位

圖片定位

二、組件介紹

Orbit是一款github上面的開源組件，需要jquery的支持，開源地址。

三、代碼示例

它的使用也是相當(dāng)簡單，首先下載源碼，引用需要的組件到頁面里面來。

<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">
        [站外圖片上傳中……(11)]
        [站外圖片上傳中……(12)]
        [站外圖片上傳中……(13)]
        [站外圖片上傳中……(14)]
        [站外圖片上傳中……(15)]
        [站外圖片上傳中……(16)]
        [站外圖片上傳中……(17)]
</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>

以上簡單代碼就完成了上述實例圖片3的效果。是不是很easy!

1、初始化常用屬性介紹

上述通過簡單的代碼就可以完成我們組件的初始化，其實初始化方法 $('#featured').orbit(); 并不是固定，它可以傳入多個參數(shù)，實現(xiàn)不同的輪播效果。由于該組件文檔并不是非常齊全，這些屬性都是通過查看源碼找到的，以下博主就根據(jù)自己的一些嘗試和理解介紹一些常用的初始化屬性。

• advanceSpeed屬性用于設(shè)置圖片的切換時間，默認值是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、組件常用方法和事件解析

除了初始化的屬性之外，組件還提供了多個事件供我們調(diào)用。查看組件源碼可以看到如下幾句：

這個表示給當(dāng)前標簽綁定了上述一些事件。我們?nèi)绾问褂盟鼈兡亍１热缟衔牟┲魇褂玫亩ㄎ粓D片的功能，我們可以這么寫。

$("#featured").trigger('orbit.goto', 3);//定位到第四張圖片。注意這里的索引是從0開始。
$('#featured').trigger('orbit.stop');//停止圖片輪詢
$('#featured').trigger('orbit.start');//啟用圖片輪詢

當(dāng)然，還有他們的像orbit.next、orbit.prev這些事件應(yīng)該也很好理解，就表示切換到下一張和上一張圖片。

四、總結(jié)

綜合來看，這是個很簡單的一個小東西，但比較實用，可以收藏下，以后或許用得上呢。如果你覺得本文對你有幫助，不妨推薦一下，后續(xù)博主還有更多好用的組件推薦給大家。

本文完！