1
我已经构建了一个简单的幻灯片，可以包含任意数量的图像。单击图像时，应前进到下一张幻灯片，单击最后一张图像时，应返回到第一张幻灯片。幻灯片：CSS3转换不起作用
该部分工作正常，但是当我尝试在每张幻灯片之间添加一个CSS淡入淡出过渡时，它只在我回到第一张幻灯片时才起作用。
我假设我的CSS存在问题。任何想法，我可能会错过？
这里的链接到小提琴：http://jsfiddle.net/databass/76nZ7/13/
而这里的HTML，JavaScript和CSS。谢谢！
HTML：
<div class="content">
<img src="http://b.vimeocdn.com/ts/254/218/254218511_640.jpg" width="640" height="360" />
</div>
<div class="content notcurrent">
<img src="http://b.vimeocdn.com/ts/254/218/254218512_640.jpg" width="640" height="360" />
</div>
<div class="content notcurrent">
<img src="http://b.vimeocdn.com/ts/254/218/254218513_640.jpg" width="640" height="360" />
</div>
的JavaScript：
/*
When the page loads, execute a function that assigns a sequence to each child slide
When a slide is clicked, the next slide will appear.
On page load, the first slide will be shown
Each slide should transition with fade-out/fade-in
*/
(function() {
var slides = document.getElementsByClassName("content");
slides[0].style.display = 'block';
//convert collection of slide elements to an actual Array, and iterate through each slide
Array.prototype.slice.call(slides).forEach(function (slideElement, slideSequence) {
//execute this function for each slide.
(function() {
// helper function to get the slide sequence.
// return 0 if we've gone through eevery slide
var getNextSequence = function() {
if (slideSequence + 1 === slides.length) {
return 0;
} else {
return slideSequence + 1;
}
}
// add a listener to each slide.
slides[slideSequence].addEventListener("click", function() {
slides[slideSequence].className = 'content notcurrent';
slides[getNextSequence(slideSequence)].className = 'content current';
});
})();
});
})()
CSS：
.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;
}