是否向此JavaScript幻灯片添加过渡/动画？

根据W3Schools教程，我正在尝试制作一个简单的JavaScript幻灯片。我如何向幻灯片类添加动画？想法是-按下下一步/上一步按钮，两张幻灯片交叉淡入淡出，或者，在最佳情况下，相应地向左/向右移动

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“幻灯片”）；
如果（n>x.length）{
slideIndex=1
}
if（n<1）{
slideIndex=x.length
};
对于（i=0；i

#sl1{
背景色：#F00；
}
#sl2{
背景色：#0F0；
}
.幻灯片{
宽度：600px；
高度：200px；
}
#下一个{
背景色：#000；
颜色：#FFF；
宽度：65px；
高度：20px；
位置：绝对位置；
最高：50%；
右：0；
}
#上{
背景色：#000；
颜色：#FFF；
宽度：75px；
高度：20px；
位置：绝对位置；
最高：50%；
左：0；
}

上一个
下一个

您可以在不透明度上进行更改，而不是显示并添加CSS转换。您还必须调整CSS，如下所示：

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“幻灯片”）；
如果（n>x.length）{
slideIndex=1
}
if（n<1）{
slideIndex=x.length
};
对于（i=0；i

.container{
位置：相对位置；
利润率：20px；
高度：200px；
}
#sl1{
背景色：#F00；
位置：绝对位置；
}
#sl2{
背景色：#0F0；
位置：绝对位置；
}
.幻灯片{
宽度：100%；
高度：200px；
过渡：1s；
}
#下一个{
背景色：#000；
颜色：#FFF；
宽度：65px；
高度：20px；
位置：绝对位置；
最高：50%；
右：0；
z指数：9；
}
#上{
背景色：#000；
颜色：#FFF；
宽度：75px；
高度：20px；
位置：绝对位置；
最高：50%；
左：0；
z指数：9；
}

以前的
下一个

您可以在不透明度上进行更改，而不是显示并添加CSS转换。您还必须调整CSS，如下所示：

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“幻灯片”）；
如果（n>x.length）{
slideIndex=1
}
if（n<1）{
slideIndex=x.length
};
对于（i=0；i

.container{
位置：相对位置；
利润率：20px；
高度：200px；
}
#sl1{
背景色：#F00；
位置：绝对位置；
}
#sl2{
背景色：#0F0；
位置：绝对位置；
}
.幻灯片{
宽度：100%；
高度：200px；
过渡：1s；
}
#下一个{
背景色：#000；
颜色：#FFF；
宽度：65px；
高度：20px；
位置：绝对位置；
最高：50%；
右：0；
z指数：9；
}
#上{
背景色：#000；
颜色：#FFF；
宽度：75px；
高度：20px；
位置：绝对位置；
最高：50%；
左：0；
z指数：9；
}

以前的
下一个

display

CSS属性不是具有转换的属性。。您必须找到另一种隐藏/显示新项目的方法。@Temani answer使用

不透明度

可以很好地工作，您还可以使用

transform:translateX（X）

显示

CSS属性不是具有转换的属性。。您必须找到另一种隐藏/显示新项目的方法。@Temani答案使用

不透明度

可以很好地工作，您还可以使用

transform:translateX（X）