輪播圖
// 獲取
var ui = document.querySelectorAll('ul li')
var oi = 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;
// 封裝自動播放函數(shù)
function zidong() {
if (index >= ui.length) {
index = 0;
}
for (var i = 0; i < ui.length; i++) {
ui[i].classList.remove('active');
oi[i].classList.remove('active');
}
console.log(index)
ui[index].classList.add('active');
oi[index].classList.add('active');
}
// 左右點擊事件
right.onclick = function () {//點擊右邊按鈕议双，輪播圖下標增加敲霍，更換圖片
right.onmousedown =function(){
right.style = 'background: blue;color: black;'
}
right.onmouseup =function(){
right.style = ' background: rgba(33, 55, 77, 0.3);color: aliceblue;'
}
index++;
zidong()
}
timer = setInterval(function () {//定時器柠座，放入輪播圖
index++;
zidong()
}, 1000)
box.onmouseenter = function () {//鼠標移入膝舅，停止輪播圖
clearInterval(timer);
timer = null;
}
box.onmouseleave = function () {//鼠標移出脖阵，開始輪播圖
timer = setInterval(function () {
index++;
zidong()
}, 1000)
}
for (var j = 0; j < oi.length; j++) {//點擊下方圖片導航，切換圖片
oi[j].ind = j;
oi[j].onclick = function () {
index = this.ind;
zidong(index)
}
}
left.onclick = function(){//點擊左邊按鈕毅弧，輪播圖下標減少睦番，更換圖片
left.onmousedown =function(){
left.style = 'background: blue;color: black;'
}
left.onmouseup =function(){
left.style = ' background: rgba(33, 55, 77, 0.3);color: aliceblue;'
}
index -- ;
if(index<0){//判斷，當下標走到0時母市，回到最后一張圖片矾兜，重新開始
index = ui.length-1
}
zidong()
}
