JsTest/index.js at master · waridesu/JsTest · GitHub

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
function Slider () {//constructorFunction for creating many similar objects
    this.imgUrl = [];
    this.curIndex = 0;
    this.prevBtn = null;
    this.nextBtn = null;
    this.sliderImg = null;
};
Slider.prototype.start = function (elId) {
    let that = this;
    let el = document.querySelector('#'+ elId);

    this.prevBtn = el.querySelector('.prev-btn');
    this.nextBtn = el.querySelector('.next-btn');
    this.sliderImg = el.querySelector('.slide-img');

    this.prevBtn.addEventListener('click', function(e) {
        that.onPrevBtnClick(e);
    });
    this.nextBtn.addEventListener('click', function(e) {
        that.onNextBtnClick(e);
    });

    this.imgUrl.push('./img/626-536x354.jpg');
    this.imgUrl.push('./img/919-536x354.jpg');
    this.imgUrl.push('./img/921-536x354.jpg');
    this.imgUrl.push('./img/988-536x354.jpg');

    this.sliderImg.src = this.imgUrl[this.curIndex];
    this.prevBtn.disabled= true;
};

Slider.prototype.onPrevBtnClick = function (e) {
    this.curIndex--;
    this.sliderImg.src = this.imgUrl[this.curIndex];
    this.nextBtn.disabled = false;

    if (this.curIndex === 0) {
        this.prevBtn.disabled = true;
    }
};

Slider.prototype.onNextBtnClick = function (e) {
    this.curIndex++;
    this.sliderImg.src = this.imgUrl[this.curIndex];
    this.prevBtn.disabled = false;

    if (this.curIndex === (this.imgUrl.length - 1)) {
        this.nextBtn.disabled = true;
    }
};

let testOne = new Slider();
let testTwo = new Slider();
let testTree = new Slider ();

testOne.start('testOne');
testTwo.start('testTwo');
testTree.start('testTree');

var slider = {//literal for single use
    imgUrl: [],
    curIndex: 0,
    prevBtn: document.querySelector('.prev-btn'),//null,
    nextBtn: document.querySelector('.next-btn'),//null,
    sliderImg: document.querySelector('.slide-img'),//null,

    start: function () {
        let that = this;

        this.prevBtn.addEventListener('click', function(e) {
            that.onPrevBtnClick(e);
        });
        this.nextBtn.addEventListener('click', function(e) {
            that.onNextBtnClick(e);
        });

        this.imgUrl.push('./img/626-536x354.jpg');
        this.imgUrl.push('./img/919-536x354.jpg');
        this.imgUrl.push('./img/921-536x354.jpg');
        this.imgUrl.push('./img/988-536x354.jpg');

        this.sliderImg.src = this.imgUrl[this.curIndex];
        this.prevBtn.disabled= true;
    },
    onPrevBtnClick: function (e) {
        this.curIndex--;
        this.sliderImg.src = this.imgUrl[this.curIndex];
        this.nextBtn.disabled = false;

        if (this.curIndex === 0) {
            this.prevBtn.disabled = true;
        }
    },
    onNextBtnClick: function (e) {
        this.curIndex++;
        this.sliderImg.src = this.imgUrl[this.curIndex];
        this.prevBtn.disabled = false;

        if (this.curIndex === (this.imgUrl.length - 1)) {
            this.nextBtn.disabled = true;
        }
    }
}
slider.start();