vipAllDay/js/js初阶/DOM/6.轮播.js

var imgBox = document.querySelectorAll("img");
var points = document.querySelectorAll("#list li");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var container = document.getElementById("container");
var currentIndex = 0; 

// 封装切换方法
function autoPlay(ind) {
    // 清空所有样式
    for(var i=0;i<points.length;i++) {
        imgBox[i].className = "choose";
        points[i].className = "";
    }
    // 添加点击下标的样式
    imgBox[ind].className = "choose active";
    points[ind].className = "selected";
}

// 点击按钮切换图片
for(var i=0;i<points.length;i++) {
    points[i].index = i;
    points[i].onclick = function() {
        console.log("点击")
        currentIndex = this.index;
        autoPlay(currentIndex);
    }
}

// 上一页
prev.onclick = function() {
    currentIndex--;
    if(currentIndex < 0) {
        currentIndex = imgBox.length - 1;
    }
    autoPlay(currentIndex);
}

// 下一页
next.onclick = function() {
    currentIndex++;
    if(currentIndex == imgBox.length) {
        currentIndex = 0;
    }
    autoPlay(currentIndex);
}

// 自动轮播
var timer = setInterval(function() {
    next.onclick();
},1000)

// 鼠标划入事件
container.onmousemove = function() {
    prev.style.display = 'block';
    next.style.display = 'block';
    clearInterval(timer)
}

// 鼠标划出事件
container.onmouseout = function() {
    prev.style.display = 'none';
    next.style.display = 'none';
    timer = setInterval(function() {
        next.onclick();
    },1000)
}