第一张图片淡出 第二张图片淡入 然后就一直不动
时间: 2023-09-14 10:12:10 浏览: 48
这是一个关于图片切换的问题,您可以使用CSS3的transition属性和opacity属性来实现图片淡入淡出效果。下面是示例代码:
HTML代码:
```
<div class="image-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
</div>
```
CSS代码:
```
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.image-container img:first-child {
opacity: 1;
}
.image-container img:last-child {
z-index: -1;
}
.image-container img.active {
opacity: 1;
z-index: 1;
}
```
JavaScript代码:
```
const images = document.querySelectorAll('.image-container img');
let index = 0;
setInterval(() => {
const currentImage = images[index];
currentImage.classList.remove('active');
index = (index + 1) % images.length;
const nextImage = images[index];
nextImage.classList.add('active');
}, 5000);
```
这段代码会每隔5秒钟切换一次图片,先逐渐淡出第一张图片,再逐渐淡入第二张图片,然后一直保持不动,直到下一次切换。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)