-
Notifications
You must be signed in to change notification settings - Fork 0
/
Slided pictures
88 lines (72 loc) · 2.16 KB
/
Slided pictures
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
class Slider{
constructor(id,cycle=3000){
this.container=document.getElementById(id);
this.items=this.container.querySelectorAll(".slider-list-item,.slider-list-item--selected");
this.cycle=cycle;
this.slideHandlers=[];
let controller=this.container.querySelector('.slide-list-control');
if(controller){
let buttons=document.querySelectorAll('.slide-control-button,.slide-control-button--selected');
controller.addEventListener('mouseover',evt=>{
var idx=Array.from(buttons).indexOf(evt.target);
if(idx>=0){
this.slideTo(idx);
this.stop();
}
});
controller.addEventListener('mouseout',evt=>{
this.start();
});
this.addSlideListener(function(idx){
let selected=controller.querySelector('.slide-control-button--selected');
if(selected) selected.className='slide-control-button';
buttons[idx].className='slide-control-button--selected';
});
}
}
getSelectedItem(){
let selected=this.container.querySelector(".slider-list-item--selected");
return selected;
}
getSelectedIndex(){
return Array.from(this.items).indexOf(this.getSelectedItem());
}
slideTo(idx){
let selected=this.getSelectedItem();
if(selected){
selected.className="slider-list-item";
}
let item=this.items[idx];
if(item){
item.className="slider-list-item--selected";
}
this.slideHandlers.forEach(handler=>{
handler(idx);
});
}
slidePrevious(){
let currentIdx=this.getSelectedIndex();
let previousIdx=(this.items.length+currentIdx-1)%this.items.length;
this.slideTo(previousIdx);
}
slideNext(){
let currentIdx=this.getSelectedIndex();
let previousIdx=(currentIdx+1)%this.items.length;
this.slideTo(previousIdx);
}
start(){
this.stop();
this._slideTimer=setInterval(()=>{
this.slideNext();
},this.cycle);
}
stop(){
clearInterval(this._slideTimer);
}
addSlideListener(handler){
this.slideHandlers.push(handler);
}
}
let s1=new Slider('my-slider');
//setInterval(s1.slideNext.bind(s1),2000);
s1.start();