我制作了一个图像滑块，但想在每张幻灯片上添加文本

Question

我正在学习 JavaScript。我制作了一个图像滑块，但想向每张幻灯片添加文本我有 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);
}

Answer 2

您可以使用 javascript 对象：

var i = 0;

var images = [];

var time = 3250;

// Image List

images[0] = {
  url: 'http://via.placeholder.com/120x120',
  caption: '120x120'
};
images[1] = {
  url: 'http://via.placeholder.com/130x130',
  caption: '130x130'
};
images[2] = {
  url: 'http://via.placeholder.com/140x140',
  caption: '140x140'
};
images[3] = {
  url: 'http://via.placeholder.com/150x150',
  caption: '150x150'
};
images[4] = {
  url: 'http://via.placeholder.com/160x160',
  caption: '160x160'
};


// Change Image

function changeImg() {

  document.slide.src = images[i].url;
  caption.innerText = images[i].caption;

  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 id="caption">2134234</div>
</div>

jsfiddle