单击第一个按钮,令图片先淡出,然后换成另外一张图片再淡入……实现a1.gif~a9.gif这九张图片依次交替显示的效果。单击第二个按钮,页面重新加载 的 现成代码不分开表示各个部分
时间: 2024-03-13 07:48:13 浏览: 28
好的,以下是完整的HTML、CSS和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片切换</title>
<style>
#image-container {
width: 500px;
height: 500px;
position: relative;
}
#image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
</style>
</head>
<body>
<button id="switch-btn">切换图片</button>
<button id="reload-btn">重新加载页面</button>
<div id="image-container">
<img src="a1.gif" id="image">
</div>
<script>
const switchBtn = document.getElementById('switch-btn');
const reloadBtn = document.getElementById('reload-btn');
const image = document.getElementById('image');
const imageNames = ['a1.gif', 'a2.gif', 'a3.gif', 'a4.gif', 'a5.gif', 'a6.gif', 'a7.gif', 'a8.gif', 'a9.gif'];
let currentIndex = 0;
switchBtn.addEventListener('click', () => {
const nextIndex = (currentIndex + 1) % imageNames.length;
const nextImage = new Image();
nextImage.src = imageNames[nextIndex];
nextImage.style.opacity = '0';
nextImage.onload = () => {
image.style.transition = 'opacity 0.5s';
image.style.opacity = '0';
setTimeout(() => {
image.src = nextImage.src;
image.style.opacity = '1';
currentIndex = nextIndex;
}, 500);
}
});
reloadBtn.addEventListener('click', () => {
location.reload();
});
</script>
</body>
</html>
```
在这个代码中,HTML中有两个按钮和一个图片容器,CSS中设置了图片容器和图片的样式,JavaScript中获取元素,并为两个按钮添加了点击事件监听器,实现了图片切换和页面重新加载的功能。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)