Our View 观点

在做项目的时候，总是会用到第三方的组件或代码，但是往往会有那么一点不完美，就比如说是这个Jquery的EasySlider组件，非常好用，标准的Jquery扩展组件，支持所有主流浏览器，并且提供很多配置项，能左右连续滚动，又能设置手动按钮左右滚动，但有一个不完美的地方就是这个Easy Slider只支持一个元素，也就是说如果你想在滚动区域滚动多个元素就有问题了，然后我就此问题作了改进，让它能够支持滚动多个元素；当改进完后又出现一个问题，多个元素连续滚动之后，滚动到最后一个元素，再往下滚动会出现空白了，一定要最后一个元素滚动到最前面才返回，于是又进行二次改进，最终形成了这个配置非常简单，连续滚动，并且可以自定义样式的左右滚动代码，代码贴出来方便大家使用：

(function ($) {


    $.fn.easySlider = function (options) {


        // default configuration properties
        var defaults = {
            prevId: 'prevBtn',
            prevText: 'Previous',
            nextId: 'nextBtn',
            nextText: 'Next',
            controlsShow: true,
            controlsBefore: '',
            controlsAfter: '',
            controlsFade: true,
            firstId: 'firstBtn',
            firstText: 'First',
            firstShow: false,
            lastId: 'lastBtn',
            lastText: 'Last',
            lastShow: false,
            vertical: false,
            speed: 800,
            auto: false,
            pause: 2000,
            slideNum: 1,
            continuous: false
        };
        var olen = 0;
        var options = $.extend(defaults, options);


        this.each(function () {
            var obj = $(this);
            var s = $("li", obj).length;
            var w = $("li", obj).width();
            var h = $("li", obj).height();
            obj.width(w);
            obj.height(h);
            obj.css("overflow", "hidden");
            var ts = s - 1;
            var t = 0;
            $("ul", obj).css('width', s * w);


            if (options.slideNum > 1) {
                obj.width(w * options.slideNum);
            }


            if (!options.vertical) $("li", obj).css('float', 'left');


            if (options.controlsShow) {
                var html = options.controlsBefore;
                if (options.firstShow) html += '' + options.firstText + '';
                html += ' ' + options.prevText + '';
                html += ' ' + options.nextText + '';
                if (options.lastShow) html += ' ' + options.lastText + '';
                html += options.controlsAfter;
                $(obj).after(html);
            };


            $("a", "#" + options.nextId).die().live('click', function () {


                animate("next", true);
            });
            $("a", "#" + options.prevId).die().live('click', function () {
                animate("prev", true);
            });
            $("a", "#" + options.firstId).die().live('click', function () {
                animate("first", true);
            });
            $("a", "#" + options.lastId).die().live('click', function () {
                animate("last", true);
            });


            function animate(dir, clicked) {
                var ot = t;
                switch (dir) {
                    case "next":


                        if (t < s - options.slideNum) {
                            t = (ot >= ts) ? (options.continuous ? 0 : ts) : t + 1;
                        }
                        else {
                            t = 0;
                        }
                        
                        break;
                    case "prev":
                        t = (t <= 0) ? (options.continuous ? ts : 0) : t - 1;
                        break;
                    case "first":
                        t = 0;
                        break;
                    case "last":
                        t = ts;
                        break;
                    default:
                        break;
                };


                var diff = Math.abs(ot - t);
                var speed = diff * options.speed;
                if (!options.vertical) {
                    p = (t * w * -1);
                    $("ul", obj).animate(
{ marginLeft: p },
speed
);
                } else {
                    p = (t * h * -1);
                    $("ul", obj).animate(
{ marginTop: p },
speed
);
                };


                if (!options.continuous && options.controlsFade) {
                    if (t == ts) {
                        $("a", "#" + options.nextId).hide();
                        $("a", "#" + options.lastId).hide();
                    } else {
                        $("a", "#" + options.nextId).show();
                        $("a", "#" + options.lastId).show();
                    };
                    if (t == 0) {
                        $("a", "#" + options.prevId).hide();
                        $("a", "#" + options.firstId).hide();
                    } else {
                        $("a", "#" + options.prevId).show();
                        $("a", "#" + options.firstId).show();
                    };
                };


                if (clicked) clearTimeout(timeout);
                if (options.auto && dir == "next" && !clicked) {


                    timeout = setTimeout(function () {
                        animate("next", false);


                    }, diff * options.speed + options.pause);
                };


            };
            // init
            var timeout;
            if (options.auto) {


                timeout = setTimeout(function () {
                    animate("next", false);
                }, options.pause);
            };


            if (!options.continuous && options.controlsFade) {
                $("a", "#" + options.prevId).hide();
                $("a", "#" + options.firstId).hide();
            };


        });


    };


})(jQuery);

前台html代码：

前台调用方法：

$("#slider").easySlider({
            prevId: 'turnL',   //设置向左滚动按钮id号
            nextId: 'turnR',  //设置向右滚动按钮id号
            controlsShow: true,  //是否显示左右按钮
            slideNum: 8,  //滚动元素个数，个人添加的新配置项
            auto: true, // 是否自动滚动
            continuous: true  //是否连续滚动
        });