js 轮播效果实例分享

前端之家收集整理的这篇文章主要介绍了js 轮播效果实例分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html

js

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);
}

})();
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/js/43065.html

猜你在找的JavaScript相关文章