web0331/3.js初级/DOM/6.轮播.js

var points = document.querySelectorAll("#list li");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var picture = document.querySelectorAll(".selected");
var container = document.getElementById("container")
var currentIndex = 0;
//点击指示点 切换图片
for(var i=0;i<points.length;i++) {
    points[i].index = i;
    points[i].onclick = function() {
        //  切换
        currentIndex = this.index;
        autoPlay(currentIndex)
    }
}

// 切换事件
function autoPlay (ind) {
    console.log(ind);
    for(var i=0;i<points.length;i++) {
        points[i].className = '';
        picture[i].className = 'selected'
    }
    points[ind].className = 'active';
    picture[ind].className = 'selected choose'
}

// 点击上一页
prev.onclick = function() {
    // console.log(currentIndex,'currentIndex')
    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() {
    clearInterval(timer);
    prev.style.display = 'block';
    next.style.display = 'block';
}

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