仿京东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);

// }