javascript - JavaScript slider 延迟

Question

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

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

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

具有 position:relative 的元素将使用其他图像旁边的自然页面顺序。