class/js/DOM/4.轮播.js

var pictures = document.querySelectorAll(".selected");
var point = document.querySelectorAll(".point li");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var list = document.getElementById("list");
var current = 0;
// 封装切换方法
function autoPlay(ind) {
    console.log(ind,'下标')
    for(var i=0;i<point.length;i++) {
        pictures[i].className = "selected"
        point[i].className = "";
    }  
    pictures[ind].className = "selected choose";
    point[ind].className = "active"; 
}

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

// 点击切换下一张
next.onclick = function() {
    current++;
    if(current == point.length) {
        current = 0;
    }
    autoPlay(current);
}

// 点击切换上一张
prev.onclick = function() {
    // console.log(point.length)
    current--;
    if(current < 0) {
        current = point.length - 1;
    }
    autoPlay(current);
}

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

// 鼠标移入停止播放
list.onmousemove = function() {
    prev.style.display = 'block';
    next.style.display = 'block';
    clearInterval(timer);
}

// 鼠标移出继续播放
list.onmouseout = function() {
    prev.style.display = 'none';
    next.style.display = 'none';
    timer =setInterval(function(){
        next.onclick()
    },1000)
}