jQuery插件之路(二)——輪播

還記得之前剛接觸前端的時候，瀏覽各大網站，不少都少不了的有個輪播的效果，那個時候本身是一個不折不扣的小白，想着這些圖片滾動起來還真是有意思，是什麼讓這些圖片在一個方向上連續的滾動呢。後來慢慢的接觸多了，以爲這些也是so easy的嘛，因而爲了加深對js、jQuery的理解以及探究網站上各類效果的實現方法，就有了jQuery插件之路這樣一個系列，固然爲了記念當初對輪播的執念，因而就從輪播開始寫了一個小小的插件，這只是一個開始，隨着後面的瞭解的更多，也會寫一些更加絢麗的DEMO。源代碼在這裏：點我獲取代碼，有興趣的朋友能夠去看下吧。好了廢話很少說了，下面附上代碼。

HTML部分：

 

    <div class="slider">
        <div class="ul-box">
            <ul>
                <li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
                <li><a href="javascript:;"><img src="img/6.jpg"/></a></li>
            </ul>
        </div>
        <div class="mask"></div>
        <div class="prev"><img src="img/btn_l.png"/></div>
        <div class="next"><img src="img/btn_r.png"/></div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/slider.js"></script>
    <script>
        $('.slider').slider({
            width : 640,  
            height : 270,   
            during : 2000, //動畫執行間隔
            speed : 500,   //動畫速度
            btnSize : 20,  //底部遮罩層的按鈕大小
            btnSpace : 10, //底部的按鈕間隙
            direction : 1  //輪播方向默認爲1，圖片向左移動
        });
    </script>

 

CSS部分：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider{
    position: relative;
    overflow: hidden;
}
.slider ul{
    list-style: none;
    float: left;
}
.slider ul li{
    float: left;
}
.slider .mask{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
}
.slider .mask .sliderBtn{
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    background: radial-gradient(white 20%, transparent 50%);
}
.slider .prev, .slider .next{
    position: absolute;
    width: 45px; 
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    cursor: pointer;
    top: 0;
    display: none;
}
.slider .prev{
    left: 0;
}
.slider .next{
    right: 0;
}
.slider .prev img, .slider .next img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -22.5px;
    margin-left: -22.5px;
}

View Code

JS部分：

(function ($) {
    $.fn.slider = function (setting) {  //給jQuery的實例對象綁定一個slider方法
        var defaultSetting = {
            width : 640,
            height : 270,
            during : 3000,
            speed : 500,
            btnSize : 30,
            btnSpace : 10,
            direction : 1
        }
        setting = $.extend(true, {}, defaultSetting, setting); //用傳入的參數替換掉默認的設置  
        return this.each(function (i, item) {   
            var _setInterval = window.setInterval;  
            window.setInterval = function (callback, timer, param) {  //重寫setInterval函數，讓其能夠傳參
                var args = Array.prototype.slice.call(arguments, 2); 
                var _fn = function () {
                    callback.apply(null, args);
                }
                return _setInterval(_fn, timer);
            }

            var _this = $(this),
            ulBox = $('.ul-box', this),
            ul = $('ul', this),
            li = $('li', ul),
            img = $('img', li),
            len = li.size(),
            mask = $('.mask', this),
            index = 0,                        //用來控制按鈕的下標
            flag = true,                      //標識動畫是否執行完成
            gap,                              //執行動畫的按鈕下標和當前按鈕的下標的差
            timer;                            //計時器

            _this.width(setting.width).height(setting.height);
            ulBox.width(setting.width * 3 * len).height(setting.height).css({
                marginLeft: -setting.width * len
            });
            ul.width(setting.width * len).height(setting.height);
            img.width(setting.width).height(setting.height);
            mask.height(setting.btnSize + 2 * setting.btnSpace);

            //添加btn
            for(var i = 0, str = ''; i < len; i++){
                str += '<div class="sliderBtn"></div>';
            }
            mask.html(str);
            var ulFir = ul.clone(true);
            var ulSec = ul.clone(true);
            var sliderBtn = $('.sliderBtn', '.mask');
            ulBox.append(ulFir);
            ulBox.append(ulSec);
            sliderBtn.each(function (i, item) {
                $(item).css({
                    width : setting.btnSize,
                    height : setting.btnSize,
                    top : setting.btnSpace,
                    left : parseInt(setting.width - (setting.btnSize + setting.btnSpace *2) *len, 10) /2 + setting.btnSize * i + setting.btnSpace * i * 2 + setting.btnSpace
                });
                $(item).mouseenter(function () {
                    gap = Math.abs(i - index);
                    i > index ? (flag && ani(1, gap)) : (flag && ani(0, gap));
                })
            });
            btnAni(0);
            //按鈕樣式變化
            function btnAni (index) {
                $('.sliderBtn').css('background', 'radial-gradient(white 20%, transparent 50%)');
                $('.sliderBtn').eq(index).css('background', 'radial-gradient(white 10%, transparent 30%, white 70%)');
            }
            //動畫
            function ani (direction, num) {
                if(flag){
                    //默認1向左運動，0向右運動
                    flag = false;
                    var ulfir = $('ul', ulBox).eq(0);
                    var left = parseInt(ulfir.css('margin-left'), 10);
                    if(direction){
                        index += num;
                        index = index % len;
                        left = left - num * setting.width;
                        ulfir.animate({
                            marginLeft: left
                        }, setting.speed, function () {
                            if(left <= -len * setting.width){
                                ulfir = ulfir.remove();     
                                ulfir.css('margin-left', 0);
                                ulBox.append(ulfir);
                            }
                            flag = true;
                        });
                    }else{
                        index -= num;
                        index = index <= -1 ? len - 1 : index;
                        left = left + num * setting.width;
                        ulfir.animate({
                            marginLeft: left
                        }, setting.speed, function () {
                            if(left >= len * setting.width){
                                var ulLast = $('ul', ulBox).eq(2).remove();
                                ulLast.css('margin-left', 0);
                                ulBox.prepend(ulLast);
                                ulfir.css('margin-left', 0);
                            }
                            flag = true
                        })
                    }
                    btnAni(index)
                }
            }
            //定時器
            timer = setInterval(ani, setting.during, setting.direction, 1);
            _this.hover(function () {
                $('.prev', this).css('display', 'block');
                $('.next', this).css('display', 'block');
                clearInterval(timer);
            }, function () {
                $('.prev', this).css('display', 'none');
                $('.next', this).css('display', 'none');
                timer = setInterval(ani, setting.during, setting.direction, 1);
            })
            $('.next').click(function () {
                flag && ani(1, 1);
            })
            $('.prev').click(function () {
                flag && ani(0, 1);
            })
        })
    }
})(jQuery)

View Code

以上就是差很少全部的代碼了，一些比較關鍵的地方已經用註釋好了，這裏就再也不敘述。若是有哪些很差的地方，萬望告知，不勝感謝。今天就先寫到這裏了，做者敲鍵盤碼字也不容易，若是你以爲你對本文還能提得上來那麼一點點興趣的話，請稍微移動下你的右手，幫點下贊，謝謝^_^。下面附上一張效果圖