<div class="box"><ul><li class="active"><img src="./image/微信图片_20190908230534.jpg" altb=""></li><li><img src="./image/微信图片_20190908230541.jpg" alt=""></li><li><img src="./image/微信图片_20190908230545.jpg" alt=""></li><li><img src="./image/微信图片_20190908230549.jpg" alt=""></li><li><img src="./image/微信图片_20190908230554.jpg" alt=""></li><li><img src="./image/微信图片_20190908230559.jpg" alt=""></li><li><img src="./image/微信图片_20190908230603.jpg" alt=""></li><li><img src="./image/微信图片_20190908230608.jpg" alt=""></li><li><img src="./image/微信图片_20190908230611.jpg" alt=""></li></ul><ol><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ol><span id="left"><</span><span id="right">></span></div>

var ul_li = document.querySelectorAll('ul li');
var ol_li = document.querySelectorAll('ol li');
var left = document.getElementById('left');
var right = document.getElementById('right');
var box = document.getElementsByClassName('box')[0];
var timer = null;     //设置一个定时器，为空指针
var  index = 0;       //设置index为下标，并先赋予其值

//封装排它的函数
function pta(a){for(var i = 0; i<ul_li.length;i++){                 //排它循环ul_li[i].classList.remove('active');ol_li[i].classList.remove('active');}ul_li[index].classList.add('active');ol_li[index].classList.add('active');
}

function auto(){index++;    //下标自增if(index >= ul_li.length){    //下标自增也需要上限啊，也不可能无限去自增。这时候就加个判断，让它大于等于li长度时，让它归零，以此循环index = 0;}pta(index);     //在循环中排它
}

//自动轮播，顺序为右
timer = setInterval(function(){auto();
},1000)

//右点击轮播
right.onclick = function(){auto(index);
}
//左点击轮播
left.onclick = function(){index--;if(index < 0){               //因为我们的习惯都是默认向右点击，如果我们需要向左点击让它往上一个图走，需要改变它的判断了index = ul_li.length - 1;}pta(index);
}

//鼠标移入，轮播停止
box.onmouseenter = function(){clearInterval(timer);     //清除定时器timer = null;          //让定时器重新为空
}
//鼠标移出，轮播重新开启
box.onmouseleave = function(){timer = setInterval(function(){auto();},1000);
}

//点击数字小圆圈，进行识别哪个图
for(var j = 0; j <ol_li.length;j++){ol_li[j].idx = j;ol_li[j].onclick = function(){index = this.idx;  //坐标赋值为this.idx（此时坐标）pta(this.idx);      //排他函数，传入实参this.idx    }
}