let box = document.getElementsByClassName('box')[0];
let main = document.getElementsByClassName('main');
let imgs = document.querySelectorAll('.main > img')
let last = document.querySelector('.last')
let next = document.querySelector('.next')
let nums = document.querySelectorAll('.circle > ol > li')
let index = 0;
let timer;
play()
function play(){
timer = setInterval(autoPlay, 2000);
}
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseleave = function () {
timer = setInterval(autoPlay, 2000);
}
next.onclick = function(){
let classIndex;
imgs.forEach((item, id) => {
if(item.className){
classIndex = id;
}
})
if(classIndex < imgs.length-1){
changePic(classIndex + 1)
}else {
classIndex = 0;
changePic(classIndex)
}
}
last.onclick = function(){
let classIndex;
imgs.forEach((item, id) => {
if(item.className){
classIndex = id;
}
})
if(classIndex > 0){
changePic(classIndex - 1)
}else {
classIndex = imgs.length - 1;
changePic(classIndex)
}
}
for(let i = 0; i < nums.length; i ++){
nums[i].onclick = function(){
changePic(i)
}
}
function autoPlay(){
if(++index >= imgs.length){
index = 0;
}
changePic(index)
}
function changePic(curIndex) {
for(let i = 0; i < imgs.length; i ++){
imgs[i].className = '';
nums[i].className = '';
}
imgs[curIndex].className = 'current';
nums[curIndex].className = 'current'
}