javascript - API 图像未按应有的方式显示

Question

我有以下 JavaScript 文件，它调用 API 并根据收到的图像显示轮播：

let area = document.getElementById("area");
let request = new XMLHttpRequest();
let url = "https://s.yimg.com/cv/apiv2/default/20200528/test.json";
request.open("GET", url, true);
request.send();
request.onload = function() {
    let data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        let array = data.data;
        let imageArr = [];
        array.map(each => {
          imageArr.push(each.image)
        });
        imageArr.map(each => {
          let slide = document.createElement('div');
          slide.setAttribute('class','slides', 'fade');
          area.appendChild(slide);
  
          let image = document.createElement('img');
          image.src = each;
          slide.appendChild(image);
        });
    }
    else {
        console.log("Fail");
    }
}  

/* PREV */
let prev = document.createElement('a');
prev.innerHTML = "PREV";
prev.setAttribute('class', 'prev');
prev.addEventListener('click',function(e){
  if(e.target){
    showSlides(slideIndex += -1);
  }
});
area.appendChild(prev);

/* NEXT */
let next = document.createElement('a');
next.innerHTML = "NEXT";
next.setAttribute('class', 'next');
next.addEventListener('click',function(e){
  if(e.target){
    showSlides(slideIndex += 1);
  }
});
area.appendChild(next);


var slideIndex = 1;
showSlides(slideIndex);

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slides");
  if (n > slides.length) {slideIndex = 1}  // goes back to the first one  
  if (n < 1) {slideIndex = slides.length} // goes to the last one
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block"; 
}

HTML 是一个简单的 div： <div id = "area"> </div>

接收到图像时，它们都会显示出来，并且只有在我单击上一个或下一个按钮后才能使用 showSlides 功能。

有人知道为什么吗？

它一次只能显示一张图片。

标签： javascripthtmlapi