仿京东BOE官网 JavaScript代码

let items = document.getElementsByClassName('item');

let points = document.getElementsByClassName('point');

let p = document.getElementsByClassName('point');

 

let index = 0; //表示第几张图片在展示和第几个点，第index张照片有active这个类名

 

// 清除classname

let clearActer = function() {

        for (let i = 0; i < items.length; i++) {

            items[i].className = 'item';

            points[i].className = 'point'

 

        }

    }

    // 改变classname实现改变

let goIndex = function() {

        clearActer();

        items[index].className = 'item active';

        points[index].className = 'point active'

 

    }

    // 下一张按钮

let goNext = function() {

        if (index < 2) {

            index++;

        } else {

            index = 0;

        }

        goIndex();

    }

    // 点击点改变图片

for (let i = 0; i < points.length; i++) {

    points[i].addEventListener("click", function() {

        let poitIndex = this.getAttribute('data-index');

        index = poitIndex;

        goIndex();

    })

}

// window.onload = function() {

//     setInterval(goNext, 2000);

// }