JavaScript滑块中的延迟

我正在用JavaScript和CSS编写一个小滑块。滑块可以工作，但是。。。从最后一张幻灯片过渡到第一张幻灯片时，我遇到了麻烦

CSS:

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

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

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)

}

HTML:

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

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

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：

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

---

谢谢

移除

位置：相对来自
.cambiaFotoActivo
规则

带有
position:relative的元素将使用其他图像旁边的自然页面顺序。
删除
position:relative来自
.cambiaFotoActivo
规则

具有
位置：relative的元素将使用与其他图像相邻的自然页面顺序。
更改
不透明度：0至<代码>显示：无和
不透明度：1
到
显示：内联

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

小提琴：

**不要担心函数是如何声明和Jquery的，只是为了做一个简单的例子而已。
Change
opacity:0至<代码>显示：无和
不透明度：1
到
显示：内联

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

小提琴：

**不必担心函数的声明方式和Jquery，只需做一个简单的示例即可。
CSS应该这样调整：

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

小提琴：

基本上，您只需将两个类的定位都设置为绝对。
CSS应按以下方式进行调整：

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

小提琴：

基本上，您只需在两个类上都将定位设置为绝对。
好吧，我仍然想知道这里发生了什么。。。为什么问题出现在最后一张幻灯片上：（.我知道在这种情况下，解决方案根本无法解决我的问题。我想使用不透明度和过渡来淡出和淡入。在每张幻灯片上都很有效…问题出现在最后一张幻灯片和第一张幻灯片之间。为什么？我不知道：P

但是如果你想知道，我只是删除了.cambiaFoto中的过渡线。然后活动幻灯片消失，新幻灯片淡入。
好吧，我仍然想知道这里发生了什么…为什么最后一张幻灯片会出问题：（.我知道这种情况下的解决方案根本无法解决我的问题。我想使用不透明度和过渡来淡出和淡入。在每张幻灯片中效果都很好…问题在最后一张幻灯片和第一张幻灯片之间。？为什么？我不知道：P

但是如果你想知道的话，我只是删除了.cambiaFoto中的转换行。然后活动幻灯片消失，新的淡入。你能创建一个代码笔/一堆代码吗？或者至少描述一下你面临的问题吗？不要使用setInterval。使用requestAnimationFrame或setTimeout，否则失败。避免使用setInterval，除非它很简单操作将花费很长的时间，因为它不会停止并等待浏览器堆栈清除。不管怎样，它都会不断增加对它的调用。另外..最好在每个语句的末尾都有
；
。我放了一个JSFIDLE。您可以看到错误：）。感谢ManoDestra和Hugo的回答：）哦，Mano Destra，我不知道requestAnimationFrame，我是noob jeje，我要调查：）。但是，对于您所说的问题中的解决方案，我使用interval=setInterval（miniSlider，5000）$scope.$on（'$destroy'，function（）{clearInterval（interval）}）这样，我从这个作用域中销毁setInterval，并在我返回这个片段时创建一个新的。您能创建一个代码笔/一把代码拨弄吗？或者至少描述一下你面临的问题不要使用setInterval。如果失败，请使用requestAnimationFrame或setTimeout。避免使用setInterval，除非它是长时间的琐碎操作，因为它不会停止并等待浏览器堆栈清除。不管怎么说，它都会不断增加对它的呼叫。而且。。拥有
是件好事