我想在 css 中制作一些顯示為帶有淡入淡出效果的幻燈片的影像。一切正常，影像使用 setInterval javascript 方法在 3 秒內顯示，但只有第一張影像顯示淡入影片。
.slide {
position: absolute;
height: 100vh;
width: 66vw;
animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg">HTML 中只添加了一個 jpg，并撰寫了 javascript 代碼來替換檔案路徑
<img class="slide" src="1.JPG">
到“2.jpg”，“3.jpg”等
只有第一張圖片有影片，后面顯示的所有內容都沒有影片。
當我檢查控制臺時，所有下一個影像仍然具有 .slide 類及其所有屬性位置/寬度/高度/影片，但它們顯示時沒有影片。
有任何想法嗎 ？
uj5u.com熱心網友回復：
基本上，css每次更改src. 您可以通過洗掉元素類、觸發 DOM 重排并再次添加類來實作。但是您應該小心，因為觸發回流可能是一項昂貴的操作。在此處閱讀更多相關資訊。
const images = [
"https://via.placeholder.com/300?text=image1",
"https://via.placeholder.com/300?text=image2",
"https://via.placeholder.com/300?text=image3",
];
const img = document.querySelector(".slide");
let imageIndex = 0;
const imageInterval = setInterval(() => {
imageIndex ;
if (imageIndex >= images.length) {
clearInterval(imageInterval);
} else {
img.src = images[imageIndex];
img.classList.remove("slide");
void img.offsetWidth; // trigger a DOM reflow
img.classList.add("slide");
}
}, 3000);.slide {
position: absolute;
height: 100vh;
width: 66vw;
animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<img class="slide" src="https://via.placeholder.com/300?text=image1">uj5u.com熱心網友回復：
很難說出你到底想要什么，但是使用純 CSS 可能是這樣的
.slide {
position: absolute;
opacity: 0;
height: 100vh;
width: 66vw;
animation: fadeIn 1s forwards;
}
.two {
animation-delay: 3s;
}
.three {
animation-delay: 6s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<img class="slide" src="https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg">
<img class="slide two" src="https://compote.slate.com/images/f063a07e-e5ab-4e04-8093-281d0a28ebe8.jpeg">
<img class="slide three" src="https://i.ytimg.com/vi/nWLUdoK5fSs/maxresdefault.jpg">轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400620.html
標籤：javascript html css 动画片
上一篇：有機會使用此代碼進行回圈嗎？