标题基于改变图像

Caption Based on changing Image?

本文关键字：改变 图像 于改变 标题      更新时间：2023-09-26

我有这样的代码:

<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中编辑照片来完成，在底部添加一些空格并添加一些文本，但是我认为这样看起来不太好看。

您可以使用您的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>
相关文章：