Unslider Web前端框架之圖片輪播

前端框架，前端組件，前端庫，都是一個意思，能看源碼。

最近做H5小游戲，用到了圖片輪播的組件，而且要求支持移動端觸屏滑動。一開始用的是nivo slider，但是對大小不一樣的圖不支持box 的參數設置。unslider，滿足了需求。

 

 

Unslider--入門篇

 

背景：因工作需求，需要完成一個圖片輪播效果，因博主不是專業的前端開發人員，so google之，經過挑選最終選擇使用Unslider插件完成工作。

一、Unslider插件介紹

unslider插件是一個超小的jQuery輪播（slider）插件，大小不到3k，源碼托管在GitHub上，是一個開源項目。

1、跨瀏覽器

Unslider已經在所有最新的瀏覽器上測試過了，並能對那些老舊的瀏覽器也能做出很好的降級處理。（PS：博主親測，在IE8上使用正常

2、支持鍵盤導航（沒錯，你沒看錯，就是鍵盤上的左右鍵，很炫，有木有！！）

3、自動調整高度

4、支持響應式布局（不懂的鏈接在此，自戳：響應式布局）

說了這么多特色了，看一下效果眼見為實吧，鏈接：http://www.bootcss.com/p/unslider/

看了效果，有沒有感覺博主的好多文是copy來的,╮(╯▽╰)╭木辦法，博主水平有限，只能邊學邊做筆記給大家分享了，多多包涵啦。（￣︶￣）↗

二、如何使用Unslider

1、引入jQuery和Unslider

使用Unslider，你需要在頁面中引入Unslider和jquery腳本，jQuery版本不限，建議在版本1.8+（博主親測使用1.8版本的jQuery.js可正常使用Unslider腳本）。

如何驗證頁面已引入jQuery腳本，按F12，在控制台中輸入!!window.jQuery,若返回true，則說明頁面中已引入jQuery腳本。

引入jQuery、Unslider腳本，頁面代碼如下：

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>

 

2、准備HTML代碼

div+ul li（無序列表），完美解決，無需額外的html標簽！為了簡潔我們的例子只寫三個li，上代碼！

 <div class="banner">
      <ul>
          <li style="width:100%;height:50px;">
              <h1>This is a slide.</h1>
          </li>
          <li style="width:100%;height:50px;">
              <h2>This is another slide.</h2>
          </li>
          <li style="width:100%;height:50px;">
             <h3>This is a final slide.</h3>
         </li>
      </ul>
</div>

 

PS：css樣式以及h1、h2、h3標簽的使用，只是為了能更好的展現出頁面切換的效果，不必深究。

3、增加Css樣式，使頁面效果更漂亮

Unslider插件沒有提供一個標准的CSS樣式，你可以盡情操作每張幻燈片（每個li標簽內存放一張幻燈片）的Css樣式，自由度之大可以想象。

 1 .banner { 
 2     position: relative; 
 3     overflow: auto; 
 4 }
 5 .banner li {
 6      list-style: none; 
 7 }
 8 .banner ul li {
 9      float: left; 
10 }

　　

4、使用unslider插件

$(function() {
  var slidey = $('.banner').unslider({
    speed: 500,               
  delay: 3000,            
  complete: function() {}, 
  keys: true,             
  dots: true,              
  fluid: false
});
  data = slidey.data('unslider'); 
  data.move(2, function() {}); 
});

 

二、源碼分析

 

 

[javascript]  view plain copy

 

 

/** 
 *   Unslider by @idiot and @damirfoy 
 *   Contributors: 
 *   - @ShamoX 
 * 
 */  
  
(function($, f) {  
    var Unslider = function() {  
        //  克隆對象  
        var _ = this;  
  
        //  設置一些默認參數  
        _.o = {  
            speed: 500,     // 動畫過渡的速度(毫秒),如果不需要過渡效果就設置為false  
            delay: 3000,    // 每張幻燈片的間隔時間(毫秒), 如果不是自動播放就設置為false  
            init: 0,        // 初始化延遲時間(毫秒),如果不需要延遲就設置為false  
            pause: !f,      // 當鼠標指針浮動在當前區域內時是否暫停自動播放  
            loop: !f,       // 是否無盡循環播放  
            keys: f,        // 是否開啟鍵盤導航  
            dots: f,        // 是否顯示導航點  
            arrows: f,      // 是否顯示向前和向后的箭頭  
            prev: '←',     // 向前按鈕中的顯示文字(或html片段)  
            next: '→',     // 向后......  
            fluid: f,       // 是否寬度自適應  
            starting: f,    // 在每個動畫前調用的函數  
            complete: f,    // 在每個動畫之后調用的函數  
            items: '>ul',   // 幻燈片的容器選擇器  
            item: '>li',    // 需要滾動的選擇器  
            easing: 'swing',// 動畫的緩動函數(easing function)  
            autoplay: true  // 是否允許自動播放  
        };  
  
        _.init = function(el, o) {  
            //  將我們在外部調用時設置的參數覆蓋掉默認參數  
            _.o = $.extend(_.o, o);  
  
            _.el = el;  
            _.ul = el.find(_.o.items);//返回ul元素集合  
            _.max = [el.outerWidth() | 0, el.outerHeight() | 0];//保存一下幻燈片div容器的寬和高  
            _.li = _.ul.find(_.o.item).each(function(index) {  
                var me = $(this),  
                    width = me.outerWidth(),  
                    height = me.outerHeight();  
  
                //  記錄最大幻燈片的寬高  
                if (width > _.max[0]) _.max[0] = width;  
                if (height > _.max[1]) _.max[1] = height;  
            });  
  
  
            //  申請一些臨時變量  
            var o = _.o,  
                ul = _.ul,  
                li = _.li,  
                len = li.length;//li元素個數  
  
            //  當前索引，或者叫頁碼更容易理解吧，源代碼中寫了“Current indeed”，應該是“index”吧  
            _.i = 0;  
  
            //  設置幻燈片div容器的樣式，高度初始化為第一個li的高度  
            el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'hidden'});  
  
            //  設置ul元素的位置和寬度，寬度的公式是(li元素的個數乘以100)%，我的例子中就是300%  
            ul.css({position: 'relative', left: 0, width: (len * 100) + '%'});  
            if(o.fluid) {  
                li.css({'float': 'left', width: (100 / len) + '%'});//自適應寬度時，li元素的寬度就是把ul的寬度平均分成len份  
            } else {  
                li.css({'float': 'left', width: (_.max[0]) + 'px'});//不是自適應時，li元素的寬度是最大的幻燈片的寬度  
            }  
  
            //  在init毫秒后開啟自動播放  
            o.autoplay && setTimeout(function() {  
                if (o.delay | 0) {  
                    _.play();  
  
                    if (o.pause) {  
                        el.on('mouseover mouseout', function(e) {  
                            _.stop();//鼠標經過時暫停  
                            e.type == 'mouseout' && _.play();//鼠標離開時播放  
                        });  
                    };  
                };  
            }, o.init | 0);  
  
            //  鍵盤事件處理  
            if (o.keys) {  
                $(document).keydown(function(e) {  
                    var key = e.which;  
  
                    if (key == 37)  
                        _.prev(); // 左箭頭按鍵  
                    else if (key == 39)  
                        _.next(); // 右箭頭按鍵  
                    else if (key == 27)  
                        _.stop(); // Esc  
                });  
            };  
  
            //  顯示導航點  
            o.dots && nav('dot');  
  
            //  顯示箭頭  
            o.arrows && nav('arrow');  
  
            //  使幻燈片div容器寬度自適應  
            if (o.fluid) {  
                $(window).resize(function() {  
                    _.r && clearTimeout(_.r);  
  
                    _.r = setTimeout(function() {  
                        var styl = {height: li.eq(_.i).outerHeight()},  
                            width = el.outerWidth();  
  
                        ul.css(styl);  
                        //這一串真是繞，其實就是計算div占父窗口的寬度原始比例，然后記錄到styl中  
                        styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';  
                        el.css(styl);//重新設置幻燈片div容器的寬度為比例而不是像素值，這樣就能達到自適應的目的了  
                        li.css({ width: width + 'px' });//設置li的絕對寬度，以防因div被自適應了而擠壓或拉伸了li造成內容扭曲（如有誤請大神指教）  
                    }, 50);//每次父窗口改變大小時，幻燈片div容器延遲50毫秒后再跟着自適應大小，請大神告訴我這樣做的目的僅僅是為了效果更自然么  
                }).resize();//強制執行resize事件，使得自適應特性在最開始時就被設置好了  
            };  
  
            //  自定義move事件，這一段不太懂，求大神指點  
            if ($.event.special['move'] || $.Event('move')) {  
                //  為幻燈片div元素綁定movestart、move、moveend事件  
                el.on('movestart', function(e) {  
                    if ((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) {  
                        e.preventDefault();//鼠標位置不在當前區域時取消事件的默認動作（我猜的，關鍵是不知道distX這幾個的准確含義）  
                    }else{  
                        el.data("left", _.ul.offset().left / el.width() * 100);  
                    }  
                }).on('move', function(e) {  
                        var left = 100 * e.distX / el.width();  
                        var leftDelta = 100 * e.deltaX / el.width();  
                        _.ul[0].style.left = parseInt(_.ul[0].style.left.replace("%", ""))+leftDelta+"%";  
  
                        _.ul.data("left", left);  
                    }).on('moveend', function(e) {  
                        var left = _.ul.data("left");//  
                        if (Math.abs(left) > 30){  
                            var i = left > 0 ? _.i-1 : _.i+1;  
                            if (i < 0 || i >= len) i = _.i;  
                            _.to(i);  
                        }else{  
                            _.to(_.i);  
                        }  
                    });  
            };  
  
            return _;  
        };  
  
        //  播放指定索引的幻燈片  
        _.to = function(index, callback) {  
            if (_.t) {  
                _.stop();  
                _.play();  
            }  
            var o = _.o,  
                el = _.el,  
                ul = _.ul,  
                li = _.li,  
                current = _.i,  
                target = li.eq(index);  
            //在動畫之前執行的函數，我的例子里都沒有，可以忽略它們  
            $.isFunction(o.starting) && !callback && o.starting(el, li.eq(current));  
  
            //  如果(一張幻燈片也沒有或者索引無效)，並且不是循環播放，就啥也不做，我覺得這樣不好，因為to這個函數就只能在循環播放狀態下工作了  
            if ((!target.length || index < 0) && o.loop == f) return;  
  
            //  檢查索引是否有效，超出時設置為0，即第一張幻燈片  
            if (!target.length) index = 0;  
            if (index < 0) index = li.length - 1;//索引負數時設置為最后一張幻燈片  
            target = li.eq(index);//獲取目標元素  
  
            var speed = callback ? 5 : o.speed | 0,//執行回調函數后返回的是真則speed設為5，如果沒有回調函數或返回假則設置為o.speed  
                easing = o.easing,  
                obj = {height: target.outerHeight()};  
  
            if (!ul.queue('fx').length) {//確保沒有為ul元素添加函數隊列，應該是為了防止上一次動作還沒有完成吧  
                //  設置對應導航點的高亮  
                el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');  
                //  改變幻燈片div容器的高度為目標元素的高度，並把ul的位置向左移動(index*100%)，使目標元素正好在幻燈片div容器區域  
                el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) {  
                    _.i = index;//移動結束之后更新一下當前索引  
                    //動畫結束之后執行的函數，我的例子中也沒有，忽略它們  
                    $.isFunction(o.complete) && !callback && o.complete(el, target);  
                });  
            };  
        };  
  
        //  每隔delay毫秒自動播放  
        _.play = function() {  
            _.t = setInterval(function() {  
                _.to(_.i + 1);//這里就加了1個索引號，具體的處理都封裝在了to方法中  
            }, _.o.delay | 0);  
        };  
  
        //  停止自動播放  
        _.stop = function() {  
            _.t = clearInterval(_.t);  
            return _;  
        };  
  
        //  向后翻一張  
        _.next = function() {  
            return _.stop().to(_.i + 1);  
        };  
        //  向前翻一張  
        _.prev = function() {  
            return _.stop().to(_.i - 1);  
        };  
  
        //  創建導航點和箭頭  
        function nav(name, html) {  
            if (name == 'dot') {  
                html = '<ol class="dots">';  
                $.each(_.li, function(index) {  
                    html += '<li class="' + (index == _.i ? name + ' active' : name) + '">' + ++index + '</li>';  
                });  
                html += '</ol>';  
                /*整理一下，在我的例子中就是這副摸樣 
                  <ol class="dots">            
                  <li class="dot active">0</li> 
                  <li class="dot">1</li> 
                  <li class="dot">2</li> 
                  </ol> 
                */  
            } else {  
                html = '<div class="';  
                html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name + ' next">' + _.o.next + '</div></div>';  
                /*也整理一下 
                  <div class="arrows"> 
                    <div class="arrow prev">←</div> 
                    <div class="arrow next">→</div> 
                  </div> 
                */  
            };  
            //先給幻燈片div容器元素加上has-dots或arrows的class，再把上面組織好的元素追加為子元素，並給該子元素添加click事件處理函數  
            _.el.addClass('has-' + name + 's').append(html).find('.' + name).click(function() {  
                var me = $(this);  
                me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev') ? _.prev() : _.next();  
            });  
        };  
    };  
  
    //  將unslider方法擴展到jQuery對象，使任意jQuery對象都能夠直接訪問該方法，就像上面那樣：$('.banner').unslider();  
    $.fn.unslider = function(o) {  
        var len = this.length;  
  
        //  遍歷li元素集  
        return this.each(function(index) {  
            var me = $(this),  
                key = 'unslider' + (len > 1 ? '-' + ++index : ''),  
                instance = (new Unslider).init(me, o);  
  
            //  給div元素添加數據  
            me.data(key, instance).data('key', key);  
        });  
    };  
  
    Unslider.version = "1.0.0";  
})(jQuery, false);  

 

三、定制自己需要的幻燈片

終於看完大部分了。好了，通過源碼至少我知道了該怎樣去控制外觀，現在我要動手啦，心里有點小激動呢~

我選擇Unslider是因為它是如此純粹，正如我想要的那樣，啥也可以不要，只要能自動循環播放、用導航點控制翻頁就滿足我的要求了。

因為默認就是自動循環播放的，所以我只要設置一個顯示導航點的參數即可，然后錦上添花也支持一下響應式吧：

 

[javascript]  view plain copy

 

$(function() {  
    $('.banner').unslider({  
        dots: true,               //  顯示導航點  
        fluid: true               //  支持響應式設計  
    });  
});  

 

通過源碼我們知道unslider為我們寫好了導航點的文檔結構、並取好了類名，但並沒有設置樣式，所以只是傳個參數是木有用滴，要自己寫樣式才能看見那些可愛的點點：

 

 

[javascript]  view plain copy

 

 

*{margin: 0;padding: 0;}  
.banner { position: relative; top:0;overflow: auto; }  
.banner li { list-style: none; }  
.banner ul li { float: left; }  
.dots{width:66px;position:absolute;bottom:10px;left:50%;margin-left:-27px;}  
.dot{  
    display:inline-block;  
    width: 10px;  
    height: 10px;  
    font-size: 0px;  
    line-height: 0px;  
    margin-right: 12px;  
    cursor: pointer;  
    background-color: #ffffff;  
    border-radius: 8px;  
}  
.dot.active{background-color: #cce8cf;}  

 

 

大功告成！

四、總結

對jquery的事件機制還不熟悉，遇到自定義事件啥的就犯暈了，這塊知識還要多加學習。

摘自：http://blog.csdn.net/u011411283/article/details/47066481

感謝分享！