VIP26/day12/js/5.轮播图.js

var picture = document.getElementsByClassName("selected");
var point = document.getElementsByTagName("li");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var container = document.getElementById("container");
// 图片索引
var isNow = 0;
// 抽取方法
var autoPlay = function(ind) {
    for(var i=0;i<point.length;i++) {
        point[i].className = '';
        picture[i].className = 'selected'
    }
    point[ind].className = 'active';
    picture[ind].className = 'selected choose';
}

// point操作
for(var i=0;i<point.length;i++) {
    point[i].index = i;
    point[i].onclick = function() {
        // this=>point[i]
        isNow = this.index;
        autoPlay(isNow);
    }
}

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

// 下一页
next.onclick = function() {
    isNow++;
    if(isNow > picture.length -1) {
        isNow = 0;
    }
    autoPlay(isNow);
}

// 自动播放
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)
}