Slideshow.js
2.0 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
//*
// 图片轮播
// */
import Loger from "../Loger";
import Ape from "./Ape";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
let loger = Loger.getLoger('PC-Slideshow');
class Slideshow extends Ape {
constructor() {
super();
this._timer = null;
this.windowWidth = 0;
this.num = 0;
this.len = 0;
this.addEvent();
this.init();
}
init() {
$(window).on('resize',this._imgReload.bind(this));
this.slideImg();
this._imgReload();
$(".slidesImg").on('load', this._onLoadImage.bind(this));
$('#dots').on('mouseenter',this._mouseenterHandler.bind(this));
$('#dots').on('mouseleave',this._mouseleaveHandler.bind(this));
}
addEvent() {
}
_onLoadImage(){
this._imgReload();
}
slideImg(){
let oli = document.getElementById('dots').getElementsByTagName("li");
let _num = 0;
let clone=$(".slidesMap").first().clone();
$("#motionMapBox").append(clone);
let li = document.getElementById('motionMapBox').getElementsByTagName("li");
let size = li.length
this.num = _num;
this.len = size;
this._timer = setInterval(function(){
li[_num].style.display="none";
_num=++_num==size ? 0:_num;
li[_num].style.display="inline-block";
// $("#motionMapBox").stop().animate({left:-this.num*this.windowWidth},500);
// $("#dots li").eq(_num).addClass('active').siblings().removeClass('active');
},3000);//切换时间
}
_mouseenterHandler(){
// clearInterval(this._timer);
}
_mouseleaveHandler(){
// setInterval(this._timer);
}
_imgReload(){
let _windowWidth = $("body").width();
this.windowWidth = _windowWidth;
$('.slidesMap').css({width:_windowWidth + "px"});
$('.slidesImg').css({width:_windowWidth + "px"});
$('#motionMapBox').width($(".slidesMap").length * _windowWidth)
}
}
export default new Slideshow;