小白想问问为啥我的代码不能实现图片在消失时是逐渐消失,在出现时是逐渐出现的动画效果opacity: 0;
transition: opacity 2s ease-in-out;
opacity:1;
我问chatgpt他是这样和我说的,可是实际并不管用,我想问问佬们我这里出了什么问题?
.slide{
display: none;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.active{
display: block;
opacity:1;
}<script>
const slides = document.querySelectorAll(".slide");
const arrowLeft = document.querySelector(".arrow-left");
const arrowRight = document.querySelector(".arrow-right");
// 定义当前显示图片的索引
let currentSlideIndex = 0;
// 定义定时器 ID
let slideIntervalID = null;
// 启动定时器
function startSlide() {
slideIntervalID = setInterval(() => {
// 将当前图片的类“active”移除,并更新索引值
slides[currentSlideIndex].classList.remove("active");
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
// 在下一张图片上添加类“active”,以便它显示出来
slides[currentSlideIndex].classList.add("active");
}, 3000);
}
// 停止定时器
function stopSlide() {
clearInterval(slideIntervalID);
}
// 添加箭头点击事件处理器
arrowLeft.addEventListener("click", () => {
// 停止自动轮换
stopSlide();
// 将当前图片的类“active”移除,并更新索引值
slides[currentSlideIndex].classList.remove("active");
currentSlideIndex = (currentSlideIndex + slides.length - 1) % slides.length;
// 在下一张图片上添加类“active”,以便它可以被显示
slides[currentSlideIndex].classList.add("active");
// 重新启动自动轮播
startSlide();
});
arrowRight.addEventListener("click", () => {
stopSlide();
slides[currentSlideIndex].classList.remove("active");
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
slides[currentSlideIndex].classList.add("active");
startSlide();
});
// 启动自动轮播
startSlide();
</script>
<div class="slider">
<div class="slidersmall">
<div>
< img src="img/明日方舟.webp" class="slide game active"/>
</div>
<div>
< img src="img/原神.webp" class="slide game" />
</div>
<div>
< img src="img/王者1.webp" class="slide game" />
</div>
<div class="arrowbigleft">
<div class="arrow-left">
</div>
</div>
<div class="arrowbigright">
<div class="arrow-right">
</div>
</div>
</div>
</div>