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
129
130
131
|
let banner = document.getElementById('banner')
let ul = document.getElementById('imagesL')
let ul_width = ul.offsetWidth
let li_count = ul.children.length
let li_width = ul.children[0].offsetWidth
let dot_a = document.getElementById('nav').children
dot_a[0].classList.add('a_color')
let prev = document.getElementById('prev')
let next = document.getElementById('next')
let index = 0
let timer = null
let bool = true
window.onfocus = function(){
function animate(element, target){
let step = 10
step = (Math.abs(element.offsetLeft) < Math.abs(target))? -step : step
let ani_timer = setInterval(function(){
element.style.left = element.offsetLeft + step + 'px'
bool = false
if(Math.abs(target - element.offsetLeft) <= Math.abs(step)){
element.style.left = target + 'px'
bool = true
clearInterval(ani_timer)
}
}, 15)
go()
}
next.onclick = function(){
clearInterval(timer)
if(bool){
index += 1;
if(index === li_count){
index = 1
ul.style.left = 0 + 'px'
}
animate(ul, -li_width * index)
getStyle(dot_a, index, li_count)
}
}
next.onmouseover = function(){
clearInterval(timer)
}
prev.onclick = function(){
clearInterval(timer)
console.log(index);
if(bool){
index -= 1
if(index === -1){
index = 4
ul.style.left = -2000 + 'px'
}
console.log(index);
animate(ul, -li_width * index)
getStyle(dot_a, index, li_count)
}
}
prev.onmouseout = function(){
clearInterval(timer)
}
function go(){
clearInterval(timer)
timer = setInterval(function(){
clearInterval(timer)
index += 1;
if(index === li_count){
index = 1
ul.style.left = 0 + 'px'
}
console.log(-li_width * index);
animate(ul, -li_width * index)
getStyle(dot_a, index, li_count)
console.log(index);
}, 2000)
}
go()
function getStyle(eleArr, index, li_Count){
for(let i = 0; i < eleArr.length; i++){
eleArr[i].classList.remove('a_color')
}
if(index === li_Count - 1){
eleArr[0].classList.add('a_color')
}else{
eleArr[index].classList.add('a_color')
}
}
for(let i = 0; i < dot_a.length; i++){
dot_a[i].onclick = function(){
clearInterval(timer)
index = i;
ul.style.left = -li_width * index + 'px'
console.log(-li_width * index);
getStyle(dot_a, index, li_count)
}
}
banner.onmouseover = function(){
clearInterval(timer)
prev.style.display = 'block'
next.style.display = 'block'
}
banner.onmouseout = function(){
clearInterval(timer)
go()
prev.style.display = 'none'
next.style.display = 'none'
}
}
window.onblur = function () {
clearInterval(timer)
}
|
