W0407/js初级/BOM&DOM/9.轮播.js

var picture = document.querySelectorAll(".pictures");
var points = document.querySelectorAll("#list li");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var container = document.getElementById("container");
var currentIndex = 0;

function autoPlay(num) {
    for (var i = 0; i < points.length; i++) {
        picture[i].className = 'pictures';
        points[i].className = '';
    }
    picture[num].className = 'pictures choose';
    points[num].className = 'active';
}

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

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

// 点击下一页
next.onclick = function () {
    currentIndex++;
    if (currentIndex > picture.length - 1) {
        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)
}