写一个html文件,一个大盒子尺寸是2066909,里面有一个小盒子,尺寸是1533840,小盒子居中,小盒子的布局是左右两个圆形按钮,按钮上分别是”<“和”>",在小盒子的中间有两个个图片,名字分别为img1和img2,要求只用css样式文件,不用js文件,实现,点击左边按钮显示img1,点击右边按钮显示img2
时间: 2024-02-25 22:54:21 浏览: 22
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
<style>
#big-box {
width: 2066px;
height: 909px;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
}
#small-box {
width: 1533px;
height: 840px;
background-color: white;
position: relative;
}
#img1, #img2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
}
#img1 {
left: 0;
}
#img2 {
right: 0;
}
.btn {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
color: white;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.btn.left {
left: 0;
}
.btn.right {
right: 0;
}
.btn:hover {
background-color: darkgray;
}
#img1.showing, #img2.showing {
display: block;
}
</style>
</head>
<body>
<div id="big-box">
<div id="small-box">
<img id="img1" src="img1.jpg">
<img id="img2" src="img2.jpg">
<div class="btn left"><</div>
<div class="btn right">></div>
</div>
</div>
<script>
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var leftBtn = document.querySelector(".btn.left");
var rightBtn = document.querySelector(".btn.right");
leftBtn.addEventListener("click", function() {
img1.classList.add("showing");
img2.classList.remove("showing");
});
rightBtn.addEventListener("click", function() {
img1.classList.remove("showing");
img2.classList.add("showing");
});
</script>
</body>
</html>
```
在上述代码中,我们首先定义了一个大盒子和一个小盒子,其中小盒子居中,并设置了左右两个圆形按钮和两个图片。使用 CSS 样式文件控制了它们的样式和位置,同时定义了一个名为 `showing` 的 class,用于切换图片的显示。
我们还使用了 JavaScript 对左右按钮的点击事件进行监听,当点击左边按钮时,显示第一个图片,隐藏第二个图片;当点击右边按钮时,显示第二个图片,隐藏第一个图片。