Question

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

该部分工作正常，但是当我尝试在每张幻灯片之间添加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;
}

Answer 1

给.current选项z-index: 10;并删除display: none;的{{1}}。然后，您必须在页面加载时将第一个项目设置为.notcurrent。

演示：http://jsfiddle.net/76nZ7/18/

Answer 2

<强> HTML：

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

<强>的CSS：

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

http://jsfiddle.net/dvdyakonov/76nZ7/19/

幻灯片：CSS3过渡无效

2 个答案: