html
js
index++;
if (index > lis.length - 1) {
index = 0;
}
setImg(index);
if (index > lis.length - 1) {
index = 0;
}
setImg(index);
}
but1.onclick = function() {
index--;
if (index < 0) {
index = lis.length - 1;
}
setImg(index);
}
function changeImg() {
if (index == lis.length - 1) { //当到最后一张图片时
index = 0
} else {
index++; //图片索引发生改变
}
setImg(index);
}
function setImg(index) {
for (j = 0; j < lis.length; j++) {
lis[j].style.display = "none";
}
lis[index].style.display = "block";
//按钮的样式要与图片对应
for (var i = 0; i < abtn.length; i++) {
abtn[i].className = ""
}
abtn[index].className = "hover";
}
//自动切换
timer = setInterval(changeImg,3000);
//按钮
for (var i = 0; i < abtn.length; i++) {
(function() {
var p = i
abtn[p].onclick = function() {
index = p;
setImg(index);
}
})();
}
