广告位轮播图 JavaScript实现
Posted 霜序0.2℃
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了广告位轮播图 JavaScript实现相关的知识，希望对你有一定的参考价值。
DOM 计时器 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片自动切换</title>
</head>
<body>
<div>
<div>
<a href="https://www.zhihu.com/hot" id="one"><img src="img/moon.png" id="pic"
style="height: 300px;width: 600px"></a>
</div>
<button class="tab">1</button>
<button class="tab">2</button>
<button class="tab">3</button>
</div>
<script>
let links = ["https://www.zhihu.com/hot", "https://www.csdn.net/", "https://www.bilibili.com/"];
let imgs = ["img/moon.png", "img/old.jpg", "img/weather.png"];
let buttons = document.getElementsByClassName("tab");
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
let a = document.getElementById("one");
let pic = document.getElementById("pic");
a.href = links[i];
pic.src = imgs[i];
}
}
self.setInterval(function () {
increase()
}, 3000);
function increase() {
let a = document.getElementById("one");
let pic = document.getElementById("pic");
let x = -1;
for (let i = 0; i < 3; i++) {
if (a.href === links[i]) {
x = i;
break;
}
}
if (x === 2) { x = 0; } else { x++; }
a.href = links[x];
pic.src = imgs[x];
}
</script>
</body>
</html>
以上是关于广告位轮播图 JavaScript实现的主要内容，如果未能解决你的问题，请参考以下文章