/
initial.js
96 lines (88 loc) · 2.55 KB
/
initial.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
import $ from '../../../jq';
//=========jquery控制逻辑代码=============
const getInitial = (DATA) => {
const LEN = DATA.length, //图片个数
$imgCt = $('.img-ct'), //图片父容器
$arrowPre = $('.arrow-pre'), //左按钮
$arrowNext = $('.arrow-next'), //右按钮
$bullet = $('.bullet'), //小圆点父容器
$firstImg = $('.img-ct>a').first(),
$lastImg = $('.img-ct>a').last();
let curPage = 0, //当前第几张图片
imgWidth = $firstImg.width(), //图片宽度
isAnimate = false; //动画加锁
//前面添加末位图片,后面添加第一张图片
$imgCt
.prepend($lastImg.clone())
.append($firstImg.clone());
//改变图片父容器宽度,向右偏移一个图片的宽度
$imgCt.width(imgWidth * $imgCt.children().length);
$imgCt.css('left', -imgWidth);
//下一张图片
const playNext = (n = 1) => {
if (isAnimate)
return;
isAnimate = true;
$imgCt.animate({
left: '-=' + imgWidth* n
}, function () {
curPage += n;
if (curPage >= LEN) {
$imgCt.css('left', -imgWidth);
curPage = 0;
}
$bullet
.children()
.removeClass('active')
.eq(curPage)
.addClass('active');
isAnimate = false;
})
};
//上一张
const playPre = (n = 1) => {
if (isAnimate)
return;
isAnimate = true;
$imgCt.animate({
left: '+=' + imgWidth* n
}, function () {
curPage -= n;
if (curPage < 0) {
$imgCt.css('left', -imgWidth * LEN);
curPage = LEN - 1;
}
$bullet
.children()
.removeClass('active')
.eq(curPage)
.addClass('active');
isAnimate = false;
})
};
const play = (n) => {
if (n > 0) {
playNext(n);
} else if (n < 0) {
playPre(-n);
}
}
$arrowPre
.on('click', function (e) {
e.preventDefault();
play(-1);
});
$arrowNext.on('click', function (e) {
e.preventDefault();
play(1);
});
$bullet
.children()
.on('click', function (e) {
let index = $bullet
.children()
.index($(this));
play(index - curPage);
});
};
module.exports=getInitial;