center-slider.js 7.07 KB
/**
 * (品牌优选)图片幻灯片插件
 * @author: wangqing(robin.wang@yoho.cn)
 * @date: 205/7/2
 */
(function($) {
    var lazyLoad = require('yoho-jquery-lazyload');

    $.fn.slider2 = function(options) {
        var timer,
            $imglist = $(this).find('.img-list'),
            $imgitem = $(this).find('.img-item'),
            $switch = $(this).find('.img-brand-switch');

        var $prevswitch = $switch.find('.prev'),
            $nextswitch = $switch.find('.next');

        $.fn.slider2.defaults = {
            index: 0,
            shownum: 3,
            autoplay: false,
            delaytime: 3000,
            isCircle: true
        };

        var shownum = options.shownum ? options.shownum : // eslint-disable-line
                $.fn.slider2.defaults.shownum;

        var isCircle = 'isCircle' in options ? options.isCircle : // eslint-disable-line
            $.fn.slider2.defaults.isCircle;

        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) {
                $nextswitch.trigger('click');
                if (index === (limit - shownum)) {
                    autoplayrecycle(--index, limit, false);
                } else {
                    autoplayrecycle(++index, limit, true);
                }
            } else {
                $prevswitch.trigger('click');
                if (index === 0) {
                    autoplayrecycle(++index, limit, true);
                } else {
                    autoplayrecycle(--index, limit, false);
                }
            }
        }

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

            timer = setInterval(function() {
                $nextswitch.click();
            }, delaytime);
        }

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

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

        }

        /**
         * 不轮播左右切换
         * @param $items 图片dom
         * @param shownum   展示张数
         * @param direction 0=左箭头, 1=右箭头
         * @param $switch 按钮
         */
        function changeMarLeft(wItem, num, direction, $arrow) {
            // 处理双击问题
            var disableSwitch = $arrow.data('disable') ? true : false;

            var offersetleft = num * wItem;
            var w = parseInt($imglist.css('width'), 10);
            var ml = $imglist.css('margin-left') === '0px' ? 0 : parseInt($imglist.css('margin-left'), 10);
            var gap = ml + offersetleft > wItem ? 0 : ml + offersetleft;
            var mo = direction === 0 ? gap : ml - offersetleft;
            var flag = direction === 0 ? ml < 0 : (w - (-ml) - offersetleft) >= wItem;

            if (disableSwitch) {
                return;
            }

            $prevswitch.data('disable', true);
            $nextswitch.data('disable', true);

            if (flag) {
                $imglist
                    .animate({
                        'margin-left': mo + 'px'
                    }, 'slow', function() {
                        $prevswitch.data('disable', false);
                        $nextswitch.data('disable', false);
                    });
                options.yasFun($arrow);
            } else {
                $prevswitch.data('disable', false);
                $nextswitch.data('disable', false);
            }
        }

        function _slideShow() {
            var $imgLazyList = $imglist.find('img.lazy'),
                i = 0,
                $img;

            for (i; i < $imgLazyList.length; i++) {
                $img = $($imgLazyList[i]);

                // 未加载图片的及时显示
                if ($img.attr('src') !== $img.data('original')) {
                    lazyLoad($img, {
                        event: 'sporty'
                    });
                    $img.trigger('sporty');
                }
            }
        }
        _slideShow();// 首次把所有懒加载图片,都加载了

        return this.each(function() {
            var opts = $.extend({}, $.fn.slider2.defaults, options);
            var mr = parseInt($imgitem.css('margin-right'), 10);
            var $banneritems = $imgitem;
            var bannerarr = [];
            var _width = $banneritems.outerWidth() + mr,
                _size = $banneritems.length,
                j = 0;

            if (_size <= shownum) {
                $switch.hide();
                return;
            }
            for (j = 0; j < $banneritems.length; j++) {
                bannerarr.push($banneritems[j]);
            }
            _size = bannerarr.length;
            $imglist.css({
                width: (_width * _size)
            });
            $nextswitch.on('click', function(e) {
                var i = 0,
                    _obj = null;

                e.preventDefault();
                if (isCircle) {
                    // 循环播放
                    changePic(shownum, _width, function() {
                        for (i = 0; i < shownum; i++) {
                            _obj = bannerarr.shift();

                            $imglist.append(_obj.outerHTML);
                            bannerarr.push(_obj);
                            $imglist.find('.img-item').first().remove();
                        }
                        $imglist.css({
                            'margin-left': '0'
                        });
                    });
                } else {
                    changeMarLeft($banneritems.outerWidth() + mr, shownum, 1, $nextswitch);
                }


            });
            $prevswitch.on('click', function(e) {
                var i = 0,
                    _obj = null,
                    offersetleft = '';

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

                        $imglist.prepend(_obj.outerHTML);
                        bannerarr.unshift(_obj);
                        $imglist.find('.img-item').last().remove();
                    }
                    offersetleft = shownum * _width;
                    $imglist.css({
                        'margin-left': -offersetleft + 'px'
                    });
                    changePic(0, _width);
                } else {
                    changeMarLeft($banneritems.outerWidth() + mr, shownum, 0, $prevswitch);
                }
            });
            if (opts.autoplay === true) {
                // autoplayrecycle(opts.index, _size, true);
                autoClickNext($(this));
                $(this).hover(function() {
                    clearInterval(timer);
                }, function() {
                    autoClickNext($(this));
                });
            }
        });

    };

}($));