一张图片淡出出现第二张图片 但第二张图片没有淡出效果代码
时间: 2023-09-11 07:12:19 浏览: 35
您可以使用CSS和JavaScript来实现这个效果。以下是一个示例代码:
HTML:
```
<div id="image-container">
<img src="image1.jpg" id="image1">
<img src="image2.jpg" id="image2">
</div>
```
CSS:
```
#image-container {
position: relative;
}
#image-container img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
transition: opacity 1s ease-in-out;
}
#image-container img:not(:first-child) {
opacity: 0;
}
```
JavaScript:
```
let currentImage = 1;
const totalImages = 2;
const fadeOutTime = 1000; // in milliseconds
setInterval(() => {
const current = document.getElementById(`image${currentImage}`);
const next = document.getElementById(`image${currentImage === totalImages ? 1 : currentImage + 1}`);
current.style.opacity = 0;
setTimeout(() => {
next.style.opacity = 1;
}, fadeOutTime / 2);
currentImage = currentImage === totalImages ? 1 : currentImage + 1;
}, 5000); // change image every 5 seconds
```
这段代码将在两张图片之间切换,每5秒钟切换一次。第一张图片将始终显示,而第二张图片将在第一张图片淡出后淡入,但没有淡出效果。