linkage-slider.js
3.31 KB
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
var $ = require('yoho.jquery'),
lazyLoad = require('yoho.lazyload');
(function($) {
var LinkageSlider = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.linkageSlider.defaults, options);
this.bigItem = this.$element.find('.big-slide').find('li');
this.smallItem = this.$element.find('.small-slide').find('li');
this.len = this.bigItem.size();
this.index = 0;
this.timer = null;
this.init();
};
LinkageSlider.prototype = {
init: function() {
this._slideShow();
if (this.len <= 1) {
this.$element.find('.slide-switch').hide();
return;
}
this._bindEvent();
this._autoplay();
},
_bindEvent: function() {
var that = this;
this.$element.find('.slide-switch').on('click', '.next', function() {
that._nextSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
}).on('click', '.prev', function() {
that._prevSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
});
this.smallItem.on('mouseenter', function() {
that.index = $(this).index();
clearInterval(that.timer);
that._slideShow();
}).on('mouseleave', function() {
that._autoplay();
});
},
_nextSlide: function() {
if (this.index === this.len - 1) {
this.index = 0;
} else {
this.index++;
}
this._slideShow();
},
_prevSlide: function() {
if (this.index === 0) {
this.index = this.len - 1;
} else {
this.index--;
}
this._slideShow();
},
_slideShow: function() {
var $img = this.bigItem.eq(this.index).find('img.lazy');
if ($img.attr('src') !== $img.data('original')) {
lazyLoad($img.trigger('appear'));
}
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
},
_autoplay: function() {
var that = this;
clearInterval(this.timer);
this.timer = setInterval(function() {
that._nextSlide();
}, this.options.time);
}
};
$.fn.linkageSlider = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('linkageSlider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('linkageSlider', (data = new LinkageSlider(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
};
$.fn.linkageSlider.Constructor = LinkageSlider;
$.fn.linkageSlider.defaults = {
time: 5000
};
})($);