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;
}