slide/BannerPc.js at master · feyy/slide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
function Banner($bannerWrapper, options) {
    var _this = this;

    if (options) {
        this.initFunctions = options.initFunctions;
    }
    // 当前元素记录
    this._index = 0;
    // 标志是否处于动画中
    this.isSliding = false;
    // 滑动位置记录
    this._slideIndex = 0;
    this.$bannerWrapper = $bannerWrapper;
    this.$bannerList = $bannerWrapper.find('.banner-list');
    this.$bannerItems = this.$bannerList.find('.banner-item');
    this._itemCount = this.$bannerItems.length;
    this.$bannerLabels = $bannerWrapper.find('.banner-labels');

    this.init = function() {

        // banner item 初始化
        if (this.initFunctions && this.initFunctions[this._index]) {
            this.initFunctions[this._index].call(this, this.$bannerItems.eq(this._index));
            this.initFunctions[this._index] = null;
        }

        this.$bannerWrapper.off('click.slide').on('click.slide', '.arrow-right', function(e) {
            _this.doSlide(1);
            // _this.restart();
        }).on('click.slide', '.arrow-left', function(e) {
            _this.doSlide(-1);
            // _this.restart();
        });

        // 标志点击事件
        if (this.$bannerLabels.length) {
            this.$bannerLabels.off('click.slide').on('click.slide', '.banner-label', function(e) {
                var $target = $(this);
                if (!$target.hasClass('active')) {
                    var nextIndex = $target.index();
                    _this.doSlide(nextIndex - _this._index);

                    // _this.restart();
                }
            });
        };

        // this.start();
    };

    // this.autoSlide = function() {
    //     _this.doSlide(1);
    //     clearTimeout(this.autoSlideTimer);
    //     _this.autoSlideTimer = setTimeout(_this.autoSlide, _this.AUTO_SLIDE_TIME);
    // };


    // this.start = function() {
    //     clearTimeout(this.autoSlideTimer);
    //     _this.autoSlideTimer = setTimeout(_this.autoSlide, _this.AUTO_SLIDE_TIME);
    // };

    // this.restart = function() {
    //     this.stop();
    //     this.start();
    // };

    // this.stop = function() {
    //     clearTimeout(this.autoSlideTimer);
    // };
};

Banner.prototype.SLIDE_TIME = 800;
Banner.prototype.AUTO_SLIDE_TIME = 6000;

Banner.prototype.doSlide = function(step) {
    // 检查是否处于动画中
    if (this.isSliding) {
        return ;
    }
    this.isSliding = true;

    var _this = this;
    var prevIndex = _this._index;

    this._index += step;

    if (step > 0) {
        this._slideIndex++;
    } else if (step < 0) {
        this._slideIndex--;
    }

    if (this._index < 0) {
        this._index = this._itemCount - 1;
    } else {
        this._index = this._index % this._itemCount;
    }

    this.$bannerItems.eq(_this._index).css({
        "left": this._slideIndex * 100 + '%',
        "display": 'block'
    });

    this.$bannerList.animate({
        left: (0 - this._slideIndex * 100) + '%'
    }, this.SLIDE_TIME, 'linear', function(e) {
        _this.$bannerItems.eq(prevIndex).css({
            "display": 'none'
        });
        // banner item 初始化
        if (_this.initFunctions && _this.initFunctions[_this._index]) {
            _this.initFunctions[_this._index].call(_this, _this.$bannerItems.eq(_this._index));
            _this.initFunctions[_this._index] = null;
        }
        _this.isSliding = false;
    });

    if (_this.$bannerLabels.length) {
        _this.$bannerLabels.children('.banner-label').eq(_this._index).addClass('active').siblings('.active').removeClass('active');
    }
}