javascript - 标题基于不断变化的图像？

Question

我有这个代码:

<script type="text/javascript">
function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").src = images[x];
      }

      function startTimer() {  //this is started when the body is loaded
          setInterval(displayNextImage, 10000);
      }

      var images = [], x = -1;
      images[0] = "image0.jpg";
      images[1] = "image1.jpg";
      images[2] = "image2.jpg";
      images[3] = "image3.jpg";
</script>

基本上每 10 秒(由 setInterval 定义)它会切换到下一张图像，然后再次循环回到第一张图像。 我需要的是当它显示图像 0 时，它会在图像下方显示标题“此图像由等人拍摄”，但是当它更改为第二张图像 (Image1) 时，它会更改为第二张图片的标题等等？最好使用 Javascript 或者必要时使用 JQuery(我更擅长 JavaScript)

我知道这可以通过在底部添加一些空间并以这种方式添加一些文本，在 Photoshop 中编辑照片来完成，但我认为它看起来不太好。

Answer 1

您可以使用 displayNextImage()、displayPreviousImage() 函数将准备好的标题放入 DIV 元素中:

<script type="text/javascript">
function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
          document.getElementById("cap").innerHTML = captions[x];
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").src = images[x];
          document.getElementById("cap").innerHTML = captions[x];
      }

      function startTimer() {  //this is started when the body is loaded
          setInterval(displayNextImage, 10000);
      }

      var images = [], captions = [], x = -1;
      images[0] = "image0.jpg";
      images[1] = "image1.jpg";
      images[2] = "image2.jpg";
      images[3] = "image3.jpg";

      captions[0] = "foo";
      captions[1] = "bar";
      captions[2] = "foobar";
      captions[3] = "foobarfoo";
</script>

在您的 HTML 中，添加 <div id="cap"></div>