广告位轮播图 JavaScript实现

最新推荐文章于 2024-04-30 16:57:21 发布

霜序0.2℃

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量188

点赞数

分类专栏：前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/Dueser/article/details/120579763

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

霜序0.2℃

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
广告位轮播图 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"><i
复制链接

扫一扫