-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathauto_slides.js
More file actions
executable file
·103 lines (87 loc) · 3.12 KB
/
auto_slides.js
File metadata and controls
executable file
·103 lines (87 loc) · 3.12 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
const bindEventSlide = function () {
let selector = '.alex-slide-button'
bindAll(selector, 'click', function (event) {
let self = event.target
let slide = self.closest('.alex-slides')
let offset = Number(self.dataset.offset)
let nextIndex = getNextIndex(slide, offset)
showImageAtIndex(slide, nextIndex)
})
}
const getNextIndex = function(slide, offset) {
let amountImg = parseInt(slide.dataset.imgs, 10);
let activeIndex = parseInt(slide.dataset.active, 10)
let nextActiveIndex = (activeIndex + offset + amountImg) % amountImg
return nextActiveIndex
}
const bindEventIndicator = function() {
let selector = '.alex-slide-indicators'
// cannot 'mouseover'---?
bindAll(selector, 'mouseover', function(event) {
let self = event.target
let index = Number(self.dataset.index)
let slide = self.closest('.alex-slides')
showImageAtIndex(slide, index)
})
}
const changeIndicator = function(slide, index) {
let indicatorClassName = 'indi-active'
removeClassAll(indicatorClassName)
let idNextIndicator = '#id-indicator-' + String(index)
let nextIndicator = query(idNextIndicator);
nextIndicator.classList.add(indicatorClassName)
}
const changeButton = function (slide, index) {
let buttonClassName = 'slide-active'
removeClassAll(buttonClassName)
let idNextImg = '#id-img-' + String(index)
let nextImg = query(idNextImg)
nextImg.classList.add(buttonClassName)
}
const showImageAtIndex = function(slide, index) {
let nextActiveIndex = index
// 4.change the self-defined 'active', which links other operations
slide.dataset.active = nextActiveIndex
//
// let buttonClassName = 'slide-active'
// removeClassAll(buttonClassName)
// // 5.present the next img through 'id'
// let idNextImg = '#id-img-' + String(nextActiveIndex)
// let nextImg = query(idNextImg)
// nextImg.classList.add(buttonClassName)
changeButton(slide, nextActiveIndex)
// 6.change indicator
// let indicatorClassName = 'indi-active'
// removeClassAll(indicatorClassName)
//
// let nextIndicatorIndex = nextActiveIndex
// let idNextIndicator = '#id-indicator-' + String(nextIndicatorIndex)
// let nextIndicator = query(idNextIndicator)
// nextIndicator.classList.add(indicatorClassName)
changeIndicator(slide, nextActiveIndex)
// 7, change index of the out indicator div
let frameOfIndicators = query('.alex-slide-indicators')
frameOfIndicators.dataset.index = nextActiveIndex
}
const playNextImage = function () {
let slide = query('.alex-slides')
let index = getNextIndex(slide, 1)
showImageAtIndex(slide, index)
}
const autoPlay = function() {
let interval = 2000
setInterval(function () {
playNextImage()
}, interval)
}
const timerDemo = function () {
let i = setInterval(function () {
log('time', new Date())
}, 1000)
}
const __main = function() {
autoPlay()
bindEventSlide()
bindEventIndicator()
}
__main()