javascript - 图像 slider 过渡未正确循环返回

Question

我试图制作一个可以在几秒钟内转换为新图像的图像 slider 。然而，出于某种原因，它并没有回到一开始的画面，并且似乎试图笨拙地过渡。这里是其余代码的链接 https://codepen.io/anon/pen/YvPdNj

var i = 0; //title
var size = 0 //image
var fade = 4000;

function imgTransition() {
   var transit = document.getElementsByTagName("img")
   for(var i= 0; i < transit.length - 1; i++) {
       transit[size].style.opacity = 0;
   }
   if (size < transit.length - 1) {
      size++;
      transit[size].style.opacity = 1;
   }
   else {
      size = 0;
      transit[size].style.opacity = 1;
   }
   setInterval('imgTransition()', fade);
}

window.onload = function() {
   imgTransition();
};

Answer 1

以下是我对您的代码所做的一些更改:

首先，我对您的 global 进行了更改我添加的变量 imgind对于图像索引，transit对于图像集合，然后我分配 transit和 size load 中的变量事件，这样你就不必在代码中一次又一次地分配它们然后我评论了函数 titleTransition()调用load事件，因为它未声明(您稍后可能会使用)并且还制作了第一张图片的 opacity到 1 因为它要先显示然后调用 setInterval(imgTransition, fade);而不是 imgTransition()这样设置的时间间隔就与代码分开了，而不是自己调用它。

看看这个修改后的片段:

Snippet

var i = 0; //title
var imgind = 0;
var size = 0 //image
var time = 3000;
var fade = 4000;
var transit = null;


function imgTransition() {
  transit[imgind].style.opacity = 0; //hiding the indexed image
  imgind++; //incrementing the image index
  if (imgind >= size) //checking if the index is greater then or equals to size
    imgind = 0; //setting index to 1st image i.e 0.
  transit[imgind].style.opacity = 1; //displaying the next image     

}


window.onload = function() {
  transit = document.getElementsByTagName("img"); // get the collection of images
  size = transit.length; //get the size of images
  transit[imgind].style.opacity = 1; //to set the opacity of 1st image
  setInterval(imgTransition, fade);
  //titleTransition(); //undefined funciton


};

img {
  transition: all .5s ease-in;
  left: 160px;
  position: absolute;
  width: 30%;
  height: 50%;
  margin: 0;
  padding: 0;
  opacity: 0;
}

<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="Mountain View" width="500" height="377">
<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" alt="Mountain View" width="500" height="377">