Question

前言：仍在学习中，因此某些事情可能看起来不应该如此。

因此，作为一种实践，我正在尝试使用Vanilla Javascript创建图像轮播。我已经在要放置它的位置创建了HTML类：

<div class="carousel-container">
  </div>

为图像创建一个数组，并且我已经创建了用于创建图像div的组件函数。为了进行调试，我在console.log中记录了函数的结果，以查看是否创建了卡。

const entryPoint = document.querySelector('.carousel-container');
const images = [
  '/assets/img1.jpeg',
  '/assets/img2.jpeg',
  '/assets/img3.jpeg',
  '/assets/img4.jpeg',
];

function createSlides(slide) {
  const carousel = document.createElement('div'),
    left = document.createElement('div'),
    image = document.createElement('img'),
    right = document.createElement('div');

  left.classList.add('left-button');
  right.classList.add('right-button');

  image.attribute.src = slide;

  carousel.appendChild(left);
  carousel.appendChild(img);
  carousel.appendChild(right);

  entryPoint.appendChild(carousel);

  console.log(carousel);
}

images.forEach(item => {
  createSlides(element);
});

问题是，它没有被创建。控制台中也没有显示任何内容，因此我无法确切看到出了什么问题。是的，这些图像以显示的文件结构存在于我的本地驱动器上。

有什么想法吗？

Answer 1

我非常确定它会引发错误

Cannot read property 'src' of undefined

由于image.attribute.src = slide;不正确的事实。应该是image.src = slide.

Answer 2

我明白了..我忘记了将js文件拖入html .. RIP

Vanilla JS中的图像轮播

2 个答案: