js 轮播图

var curIndex = 0;
//时间间隔(单位毫秒)，每秒钟显示一张，数组共有3张图片放在img文件夹下
var timeInterval = 5000;

var img = document.getElementById("adv_img");
let adv_no = document.getElementsByClassName("adv_no")[0].getElementsByTagName("p");

//定义一个存放照片位置的数组，可以放任意个，在这里放3个
var arr = new Array();
arr[0] = "images/guanggao1.png";
arr[1] = "images/guanggao2.png";
arr[2] = "images/guanggao3.png";

for(let i=0;i<arr.length;i++){
    addAdvNoOnclick(i);
}

setInterval(changeImg, timeInterval);

// 清除被选中的编号
hideAllAdvNo();
// 默认将0设为选中
adv_no[0].classList.add("adv_active");

function changeImg() {
    if (curIndex == arr.length - 1) {
        curIndex = 0;
    } else {
        curIndex += 1;
    }
    img.src = arr[curIndex];
    hideAllAdvNo();
    // 广告编号被选中
    adv_no[curIndex].classList.add("adv_active");
}

function hideAllAdvNo() {
    for(let i=0;i<arr.length;i++){
        adv_no[i].classList.remove("adv_active");
    }
}

function addAdvNoOnclick(i){
    adv_no[i].onclick = function(){
        hideAllAdvNo();
        adv_no[i].classList.add("adv_active");
        curIndex = i;
        img.src = arr[curIndex];
    }
}