-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.kslide.js
128 lines (112 loc) · 5.58 KB
/
jquery.kslide.js
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
123
124
125
126
127
128
/*! Copyright (c) 2019 syj
* 自动滚动带控制条的jquery插件
*
* Version: 1.0.0
*
*/
(function($) {
$.fn.extend({
kslide: function(options) {
var defaults = {
width : 'auto', //设置宽度
time : 4, //kslide-item下一个滚动间隔时间
slideTime: 0.5, //kslide-item滚动动画时间
backDelay:0.5, //还原位置时间
controlItemWidth:40, //控制蓝条宽度
controlItemGap:5, //控制蓝条间距
reverse:false, //滚动方向,默认从右到左
height : '', //设置kslide-wrap高度
autoHeight:true, //自动生成kslide-wrap高度
};
var o = $.extend(defaults, options);
var kslide = $(this);
var kslideLength = kslide.find('.kslide-item').length;
var kslideIndex = 0;
var kslideInterval;
var kslideTimer;
var kslideNavbar;
var kslideWrap;
var maxItemHeight = 0;
if(kslideLength>1){
kslideWrap = kslide.find('.kslide-wrap');
if(kslideWrap.length==0){
kslideWrap = $('<div class="kslide-wrap"></div');
kslideWrap.html(kslide.html());
kslide.html(kslideWrap);
}
$.each(kslide.find('.kslide-item'),function(i,kslideItem) {
$(kslideItem).css('width','100%');
$(kslideItem).css('position','absolute');
if(i==0){
$(kslideItem).css('transform','translateX(0px)');
}else{
$(kslideItem).css('transform','translateX('+(o.reverse?'-100%':'100%')+')');
}
var kslideItemHeight = $(kslideItem).height();
if(kslideItemHeight>maxItemHeight){
maxItemHeight = kslideItemHeight;
}
})
kslide.css('position','relative');
kslide.css('overflow','hidden');
kslide.width(o.width);
if(o.autoHeight){
kslideWrap.height(o.height?o.height:maxItemHeight);
kslideWrap.css('overflow','hidden');
}
kslideNavbar = $('<div class="kslide-navbar" style="width: 100%; position: absolute; bottom: 5px; text-align: center;"></div>');
for(var i=0;i<kslideLength;i++){
var controlItem = $('<a class="control-item" style="display: inline-block; height: 14px; position: relative;"><span class="bg" style="background: #eee; position: absolute; left: 0px; top: 5px; height: 4px; width: 100%;"></span><span class="process" style="background: #128bed; position: absolute; height: 4px; left: 0px; top: 5px; z-index: 2; width: 0px;"></span></a>');
controlItem.css('width',o.controlItemWidth+'px');
controlItem.css('margin',o.controlItemGap+'px');
kslideNavbar.append(controlItem);
}
kslide.append(kslideNavbar);
kslide.find('.process').eq(0).css('transition','all '+(o.time+1)+'s');
setTimeout(function() {
kslide.find('.process').eq(0).css('width','100%');
}, o.backDelay*1000);
kslideInterval = setInterval(function() {
kslide.find('.process').eq((kslideIndex)%kslideLength).css('transition','');
kslide.find('.process').eq((kslideIndex)%kslideLength).css('width','0px');
kslide.find('.process').eq((kslideIndex+1)%kslideLength).css('transition','all '+(o.time+1)+'s');
kslide.find('.process').eq((kslideIndex+1)%kslideLength).css('width','100%');
kslide.find('.kslide-item').eq(kslideIndex%kslideLength).css('transition','all '+o.slideTime+'s');
kslide.find('.kslide-item').eq(kslideIndex%kslideLength).css('transform','translateX('+(o.reverse?'100%':'-100%')+')');
kslide.find('.kslide-item').eq((kslideIndex+1)%kslideLength).css('transition','all '+o.slideTime+'s');
kslide.find('.kslide-item').eq((kslideIndex+1)%kslideLength).css('transform','translateX(0px)');
kslideTimer = setTimeout(function() {
kslide.find('.kslide-item').eq((kslideIndex)%kslideLength).css('transition','');
kslide.find('.kslide-item').eq((kslideIndex)%kslideLength).css('transform','translateX('+(o.reverse?'-100%':'100%')+')');
kslideIndex++;
}, o.backDelay*1000);
}, o.time*1000);
kslide.find('.control-item').on('click',function(e){
stopKslideInterval();
var index = kslide.find('.control-item').index(this);
kslide.find('.process').css('width','0px');
$(this).find('.process').css('width','100%');
kslide.find('.kslide-item').hide();
kslide.find('.kslide-item').eq(index).fadeIn();
})
}else{
kslide.find('.kslide-navbar').hide();
}
function stopKslideInterval(){
if(kslideInterval){
clearInterval(kslideInterval);
clearTimeout(kslideTimer);
kslideInterval = null;
kslideTimer = null;
kslide.find('.process').css('transition','');
kslide.find('.kslide-item').css('transition','');
kslide.find('.kslide-item').css('transform','translateX(0px)');
}
}
return this;
}
});
$.fn.extend({
kslide: $.fn.kslide
});
})(jQuery);