用html做一个图片切换

最新推荐文章于 2023-02-18 14:57:17 发布

wwqs

最新推荐文章于 2023-02-18 14:57:17 发布

阅读量2.3k

点赞数 1

分类专栏： html ，css 文章标签： html css

本文链接：https://blog.csdn.net/w12111w/article/details/77586891

版权

html ，css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
background-color: yellow;

padding-left: 20px;
padding-right: 20px;
}

.k div {
background-color: green;
text-align: center;
line-height: 220px;

width: 220px;
height: 220px;
display: none;

}
.k .k1{
background-color:red;
}
.k .k2{
background-color: pink;
}
.k .k3{
background-color: purple;
}
.k5{
width: 220px;
height: 220px;
background-color: yellow;
}

</style>
</head>
<body>
<div>
<span class="t1">1</span>
<span class="t2">2</span>
<span class="t3">3</span>
<span class="t4">4</span>
</div>
<div class="k5"></div>
<div class="k">

<div class="k1">第一块</div>
<div class="k2">第二块</div>
<div class="k3">第三块</div>
<div class="k4">第四块</div>
</div>
</body>
<script type="text/javascript">
var t1 = document.getElementsByClassName('t1')[0];
var t2 = document.getElementsByClassName('t2')[0];
var t3 = document.getElementsByClassName('t3')[0];
var t4 = document.getElementsByClassName('t4')[0];
var k1 = document.getElementsByClassName('k1')[0];
var k2 = document.getElementsByClassName('k2')[0];
var k3 = document.getElementsByClassName('k3')[0];
var k4 = document.getElementsByClassName('k4')[0];
var k5 = document.getElementsByClassName('k5')[0];

t1.onclick = function () {
k5.style.display = "none";
k1.style.display = "block";
k2.style.display = "none";
k3.style.display = "none";
k4.style.display = "none";
}
t2.onclick = function () {
k5.style.display = "none";
k2.style.display = "block";
k1.style.display = "none";
k3.style.display = "none";
k4.style.display = "none";

}
t3.onclick = function () {
k5.style.display = "none";
k3.style.display = "block";
k1.style.display = "none";
k2.style.display = "none";
k4.style.display = "none";
}
t4.onclick = function () {
k5.style.display = "none";
k4.style.display = "block";
k1.style.display = "none";
k2.style.display = "none";
k3.style.display = "none";
}

</script>
</html>