使用Javascript显示图像数组

时间:2018-05-23 19:54:27

标签: javascript

我正在尝试使用JavaScript显示图像数组,但他似乎并没有找到图像。我确实在屏幕上显示了这些消息:[Object HTMLImage Element]

任何帮助将不胜感激。我是一个想要学习的学生。



let slideshow;
let currentItem = 0;
let items = [6];
//let ready = true;
items[0] = new Image();
items[0].src = "../images/bier%20tafe.jpeg";

items[1] = new Image();
items[1].src = '../images/pintjes.jpeg';

items[2] = new Image();
items[2].src = '../images/flesjes.jpeg';

items[3] = new Image();
items[3].src = '../images/grain.jpg';

items[4] = new Image();
items[4].src = '../images/cigar.jpg';

items[5] = new Image();
items[5].src = '../images/whiskey.jpg';

document.addEventListener('DOMContentLoaded', function(ev){
  slideshow = document.querySelector('.slideshow');
  slideshow.addEventListener('click', next);
  //call the event once to start the show
  slideshow.dispatchEvent(new MouseEvent('click'));
  //next(); //the line above is the same as calling next()
});

function next(ev){
  //this runs when the slideshow has been clicked
  ev.preventDefault();
  //call the function to remove the oldest item (if it exists)
  removeItem();
  //add the new one
  let item = document.createElement('div');
  item.textContent = items[currentItem];
  item.classList.add("slideshow-item");
  slideshow.appendChild(item);
  setTimeout(function(){
    item.classList.add('active');
    //this could fail if the user clicked twice within 20 milliseconds
  }, 20);
  currentItem++;
  if(currentItem > items.length-1){
    currentItem = 0;
  }
}




1 个答案:

答案 0 :(得分:1)

我认为你的错误在于使用:

  

item.textContent = items [currentItem];

这是试图设置一个文本元素,因为你给它一个图像对象,它只是给你那个对象的textContent值“[Object HTMLImage Element]”。

相反,您需要将图像实际放在div中:

  

item.appendChild( items [currentItem] ;

这会将图像作为子图像追加到您指定的div中。