Question

我用JavaScript和CSS编写了一个小滑块。滑块工作，但......在最后一张幻灯片到第一张幻灯片的过渡中我遇到了麻烦...

CSS：

.cambiaFoto{
    opacity: 0;
    transition: all 0.8s;
    position: absolute;
}
.cambiaFotoActivo{
    opacity: 1;
    transition: all 0.8s;
    position: relative;
}

HTML：

   <div class="col-sm-5 alinear-der" ng-controller="cambiaFoto">
     <img src="img/productos/foto1.png" alt="" class="responsive-img cambiaFoto cambiaFotoActivo">
     <img src="img/productos/foto2.png" alt="" class="responsive-img cambiaFoto">
     <img src="img/productos/foto3.png" alt="" class="responsive-img cambiaFoto">
   </div>

JavaScript的：

function cambiaFotoCtrl($scope){

    function miniSlider(){
        var activo = document.getElementsByClassName('cambiaFotoActivo');
    activo = activo[0]
    siguiente = activo.nextElementSibling
    if (siguiente == null){
        siguiente = activo.parentNode.firstElementChild
    }
    activo.classList.remove('cambiaFotoActivo')
    siguiente.classList.add('cambiaFotoActivo')
    }

    setInterval(miniSlider, 5000)

}

jsfiddle：https://jsfiddle.net/paw30e8b/

有人知道这里发生了什么吗？谢谢！

Answer 1

从position: relative;规则中删除.cambiaFotoActivo。

position: relative元素将使用与其他图像相邻的自然页面顺序。

Answer 2

将opacity: 0;更改为display: none;，将opacity: 1更改为display: inline。

.cambiaFoto{
    transition: all 0.8s;
    position: relative;
    display: none;
}
.cambiaFotoActivo{
    transition: all 0.8s;
    display: inline;
}

小提琴：https://jsfiddle.net/0ke2q38d/1/

**不要担心如何声明函数和Jquery，只是做了一个简单的例子。

Answer 3

CSS应该这样调整：

.cambiaFoto{
    opacity: 0;
    transition: all 0.8s;
    position: absolute;
}
.cambiaFotoActivo{
    opacity: 1;
    transition: all 0.8s;
    position: absolute;
}

小提琴：https://jsfiddle.net/gmdwv4hg/

基本上你只需要在两个类上设置绝对定位。

Answer 4

好吧，我仍然想知道这里发生了什么......为什么问题是最后一张幻灯片:(。我知道这种情况下的解决方案，是一个解决方案，根本无法解决我的问题。我想淡出并且使用不透明度和过渡淡入。在每张幻灯片中都很好用......问题出在最后一张幻灯片和第一张幻灯片之间。为什么？我不知道：P

但是如果你想知道，我只是删除.cambiaFoto中的过渡行。然后活动幻灯片消失，新的淡入淡出。

JavaScript延迟滑块

4 个答案: