jQuery插件之路——轮播

Posted 2020-07-18 我要心态好好哒

还记得以前刚接触前端的时候，浏览各大网站，很多都少不了的有个轮播的效果，那个时候自己是一个彻彻底底的小白，想着这些图片滚动起来还真是有意思，是什么让这些图片在一个方向上连续的滚动呢。后来慢慢的接触多了，觉得这些也是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

以上就是差不多所有的代码了，一些比较关键的地方已经用注释好了，这里就不再叙述。如果有哪些不好的地方，万望告知，不胜感谢。今天就先写到这里了，作者敲键盘码字也不容易，如果你觉得你对本文还能提得上来那么一点点兴趣的话，请稍微移动下你的右手，帮点下赞，谢谢^_^。下面附上一张效果图