帮我写一个前端网页,用于展示两张图,手机端显示小图,pc端显示大图自动切换
时间: 2024-05-15 11:16:57 浏览: 5
很高兴为您提供帮助,以下是一个简单的实现方案:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片展示</title>
<style>
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.image {
width: 100%;
height: auto;
display: none;
}
.image.active {
display: block;
}
@media screen and (max-width: 767px) {
.image.small {
display: block;
}
.image.large {
display: none;
}
}
@media screen and (min-width: 768px) {
.image.small {
display: none;
}
.image.large {
display: block;
}
}
</style>
</head>
<body>
<div class="container">
<img class="image small active" src="small-image.jpg">
<img class="image large" src="large-image.jpg">
</div>
<script>
var smallImage = document.querySelector('.image.small');
var largeImage = document.querySelector('.image.large');
function toggleImage() {
smallImage.classList.toggle('active');
largeImage.classList.toggle('active');
}
setInterval(toggleImage, 5000);
</script>
</body>
</html>
```
CSS样式:
- 设置整个页面容器的最大宽度为800px,并在页面水平居中;
- 设置图片的宽度为100%,高度自动调整,同时隐藏所有图片;
- 在手机端(屏幕宽度小于768px)显示小图,隐藏大图;在PC端(屏幕宽度大于等于768px)显示大图,隐藏小图。
JavaScript代码:
- 获取小图和大图的DOM节点;
- 定义一个toggleImage函数,用于切换小图和大图的显示与隐藏;
- 使用setInterval函数,每隔5秒钟调用一次toggleImage函数,实现自动切换。
以上代码实现了一个简单的前端网页,用于展示两张图,手机端显示小图,PC端显示大图自动切换。您可以根据自己的需求进行修改和优化。