javascript - 我制作了一个图像 slider ，但想在每张幻灯片中添加文本

Question

我正在学习 JavaScript。我制作了一个图像 slider ，但想向每张幻灯片添加文本 我有 5 张图像，只想将文本添加到每张幻灯片，它位于从上到下的中间和中心。谢谢大家

var i = 0;
var images = [];
var time = 3250;

// Image List
images[0] = 'http://lorempixel.com/300/200';
images[1] = 'http://placehold.it/300x200';
images[2] = 'http://lorempixel.com/300/200';
images[3] = 'http://placehold.it/300x200';
images[4] = 'http://lorempixel.com/300/200';

// Change Image
function changeImg(){
  document.slide.src = images[i];

  if (i < images.length - 1) {
    i++;
  } else {
    i = 0;
  }

  setTimeout("changeImg()", time);
}

window.onload = changeImg;

* {margin:0;padding:0;box-sizing:border-box}

#wrapper {
  width: 800px;
  height: 400px;
  margin: 50px auto;
}

<h1>JS Slider </h1>
<div id="wrapper">
  <img name="slide" alt="slide image">
</div>

Answer 1

为了每张图片显示唯一的文本，您首先必须实现一个包含这两个值的对象:

var images = [];

function appendImage(src, text) {
    images.push({
        src: src,
        text: text
    });
}

然后像这样创建 5 张图片:

appendImage('1.jpg', 'Picture 1');
appendImage('2.jpg', 'Picture 2');
appendImage('3.jpg', 'Picture 3');
appendImage('4.jpg', 'Picture 4');
appendImage('5.jpg', 'Picture 5');

只需确保您有一个适当放置(使用 CSS)的元素来填充文本

<div id="wrapper">
    <img name="slide" alt="slide image">
    <span id="sliderText"></span>
</div>

changeImg 函数的变化很小，您只需要考虑新的数据结构。

var sliderText = document.getElementById('sliderText');
function changeImg(){
    document.slide.src = images[i].src;
    sliderText.innerHTML = images[i].text;
    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    setTimeout("changeImg()", time);
}