Javascript 幻灯片放映：CSS3转换不工作

我制作了一个简单的幻灯片，可以包含任意数量的图像。单击图像时，它应前进到下一张幻灯片，单击最后一张图像时，它应返回到第一张幻灯片

这部分工作正常，但当我尝试在每张幻灯片之间添加CSS淡入淡出过渡时，它只在我返回第一张幻灯片时起作用

我想我的CSS有问题。你知道我可能遗漏了什么吗

以下是小提琴的链接：

下面是HTML、JavaScript和CSS。谢谢

HTML:

CSS:

---

给

.current

选项

z-index:10并删除
显示：无用于
.notcurrent
。
然后，当页面加载时，必须将第一项设置为
.current

演示：
html:

<div class="content current">
   ...
</div>
<div class="content notcurrent">
   ...
</div>
<div class="content notcurrent">
   ...
</div>

.content {
    ...
}
.notcurrent {
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
}
.current {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    z-index: 1;
}


.content {
    width: 640px;
    height: 360px;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}
.notcurrent {
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
    display: none;
}

.current {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

<div class="content current">
   ...
</div>
<div class="content notcurrent">
   ...
</div>
<div class="content notcurrent">
   ...
</div>

.content {
    ...
}
.notcurrent {
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
}
.current {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
    z-index: 1;
}