推薦一款帶暫停功能的輪播組件，不要謝我，我叫紅領巾！

前言：關於輪播組件，那確定是一搜一大把，實在不行本身寫貌似也不難。最近博主在項目中用到一款輪播組件，功能齊全，能夠設置各類標題樣式、動畫效果、輪播時間、開始暫停等功能，在此推薦給你們，供你們參考。相信有你須要的效果。

本文原創地址：http://www.cnblogs.com/landeanfen/p/6054660.html

1、效果展現

多說無益，來看一組效果展現圖，感覺一下！

一、先跟你們見個面，打個招呼

二、什麼？切換太慢了？好，加快速度！

三、加入其餘功能

四、圖片過小，看不出效果？好，那來個大圖感覺下！

 

五、若是你不想要右上角的小圖標，照樣能夠。

 六、若是你對上述滑動效果不滿意，組件提供了其餘幾種圖片切換方式

淡入淡出

水平滑動

七、最後來個圖片定位

 

2、組件介紹

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

3、代碼示例

它的使用也是至關簡單，首先下載源碼，引用須要的組件到頁面裏面來。

    　　<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!

一、初始化經常使用屬性介紹

上述經過簡單的代碼就能夠完成咱們組件的初始化，其實初始化方法 $('#featured').orbit(); 並非固定，它能夠傳入多個參數，實現不一樣的輪播效果。因爲該組件文檔並非很是齊全，這些屬性都是經過查看源碼找到的，如下博主就根據本身的一些嘗試和理解介紹一些經常使用的初始化屬性。

1. advanceSpeed屬性用於設置圖片的切換時間，默認值是4000，單位是毫秒。
2. timer屬性用於控制是否啓動開始暫停功能，就是咱們右上角的那個小圖標，原來就是經過它來控制的。默認true（開啓）。
3. animation屬性用於控制圖片切換的動畫效果，可用的選項有fade（淡入）, horizontal-slide（垂直滑動）, vertical-slide（水平滑動）, horizontal-push, vertical-push總共5種。
4. captions屬性表示是否啓用圖片標題。
5. captionAnimation屬性用於控制標題的切換動畫。
6. directionalNav屬性控制是否啓用上一頁、下一頁按鈕功能。
7. 其餘更多初始化屬性能夠自行查看源碼：

最終的用法以下：

 　　　　　　　　 $('#featured').orbit({
                    //advanceSpeed: 4000,//圖片切換時間
                    //timer:false,       //是否啓動開始暫停功能
                    //animation: 'fade', //動畫效果：有fade（淡入）, horizontal-slide（垂直滑動）, vertical-slide（水平滑動）, horizontal-push, vertical-push
                    //captions: false,    //是否啓用標題
                    //captionAnimation: 'slideOpen',  //標題動畫
                    //directionalNav: false,//是否啓用上一頁、下一頁功能
                });

二、組件經常使用方法和事件解析

除了初始化的屬性以外，組件還提供了多個事件供咱們調用。查看組件源碼能夠看到以下幾句：

這個表示給當前標籤綁定了上述一些事件。咱們如何使用它們呢。好比上文博主使用的定位圖片的功能，咱們能夠這麼寫。

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

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

4、總結

好了，很簡單的一個東西，這裏就介紹完了，但願對你有用。

若是你以爲本文可以幫助你，能夠右邊隨意 打賞 博主，也能夠 推薦 進行精神鼓勵。你的支持是博主繼續堅持的不懈動力。

本文原創出處：http://www.cnblogs.com/landeanfen/

歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利