center-slider.js 4.27 KB
/**
 * (品牌优选)图片幻灯片插件
 * @author: wangqing(robin.wang@yoho.cn)
 * @date: 205/7/2
 */
(function($) {
    $.fn.slider2 = function(options) {
        var timer;

        function autoplayrecycle(index, limit, toright) {
            window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);// eslint-disable-line
        }

        function autoplay(index, limit, toright) {
            if (toright === true) {
                $('.img-brand-switch .next').trigger('click');
                if (index === (limit - 3)) {
                    autoplayrecycle(--index, limit, false);
                } else {
                    autoplayrecycle(++index, limit, true);
                }
            } else {
                $('.img-brand-switch .prev').trigger('click');
                if (index === 0) {
                    autoplayrecycle(++index, limit, true);
                } else {
                    autoplayrecycle(--index, limit, false);
                }
            }
        }

        function autoClickNext(dom) {
            var delaytime = 'delaytime' in options ? options.delaytime :
                $.fn.slider2.defaults.delaytime;

            timer = setInterval(function() {
                dom.find('.next').click();
            }, delaytime);
        }

        function changePic(index, width, callback) {
            var offersetleft = -(index * width);

            $('.img-list')
                .animate({
                    'margin-left': offersetleft + 'px'
                }, 'slow', callback);

        }
        $.fn.slider2.defaults = {
            index: 0,
            shownum: 3,
            autoplay: false,
            delaytime: 3000
        };
        return this.each(function() {
            var opts = $.extend({}, $.fn.slider2.defaults, options);
            var mr = parseInt($('.img-item').css('margin-right'), 10);
            var $banneritems = $('.img-item');
            var bannerarr = [];
            var _width = $banneritems.outerWidth() + mr,
                _size = $banneritems.length,
                j = 0;

            if (_size <= 3) {
                $(this).find('.img-brand-switch').hide();
                return;
            }
            for (j = 0; j < $banneritems.length; j++) {
                bannerarr.push($banneritems[j]);
            }
            _size = bannerarr.length;
            $(this).find('.img-list').css({
                width: (_width * _size)
            });
            $(this).find('.next').on('click', function(e) {
                var i = 0,
                    _obj = null;

                e.preventDefault();

                changePic(3, _width, function() {
                    for (i = 0; i < 3; i++) {
                        _obj = bannerarr.shift();

                        $('.img-item').parent().append(_obj.outerHTML);
                        bannerarr.push(_obj);
                    }
                    $('.img-item').first().remove();
                    $('.img-item').first().remove();
                    $('.img-item').first().remove();
                    $('.img-list').css({
                        'margin-left': '0'
                    });
                });
            });
            $(this).find('.prev').on('click', function(e) {
                var i = 0,
                    _obj = null,
                    offersetleft = '';

                e.preventDefault();
                for (i = 0; i < 3; i++) {
                    _obj = bannerarr.pop();

                    $('.img-item').parent().prepend(_obj.outerHTML);
                    bannerarr.unshift(_obj);
                }
                offersetleft = 3 * _width;
                $('.img-item').last().remove();
                $('.img-item').last().remove();
                $('.img-item').last().remove();
                $('.img-list').css({
                    'margin-left': -offersetleft + 'px'
                });
                changePic(0, _width);
            });
            if (opts.autoplay === true) {
                // autoplayrecycle(opts.index, _size, true);
                autoClickNext($(this));
                $(this).hover(function() {
                    clearInterval(timer);
                }, function() {
                    autoClickNext($(this));
                });
            }
        });

    };

}($));