Javascript 标题与图片相符的幻灯片

Question

我用 HTML/CSS/JS 制作了这个小幻灯片。

大部分都在工作，但有一件事我想不通。

如何使自动滑动打开时每张图片上方的文字适合 img 本身？

现在它只在我手动点击时显示每个 img 的正确标题。

var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;

function makeUniqueRandom() {
  if (!uniqueRandoms.length) {
    for (var i = indexCount; i <= total; i++) {
      uniqueRandoms.push(i);
    }
  }
  var index = Math.floor(Math.random() * uniqueRandoms.length);
  var val = uniqueRandoms[index];

  uniqueRandoms.splice(index, 1);

  return val;
}

function slide(x) {
 if(indexCount + x >= 0 && indexCount + x <= total) {
  clearInterval(sliderInterval);
  indexCount += x;
  
  var Image = document.getElementById('img');
   Image.src = "images/img" + indexCount + ".jpg";
  
  update_dom();
  

  sliderInterval = window.setInterval( slideA, 3000);
 }
}

function update_dom() {
 var left_holder = document.getElementById('left_holder');
 var right_holder = document.getElementById('right_holder');
 
 ChangeText(indexCount);
 
 if(indexCount == 0) {
  left_holder.style.display =  "none";
 } else if (indexCount == total) {
  right_holder.style.display = "none";
 } else {
  right_holder.style.display = "block";
  left_holder.style.display = "block";
 }
}

function slideA() {
  var Image = document.getElementById('img');
  imagescount = makeUniqueRandom();
  Image.src = "images/img" + imagescount + ".jpg";
  update_dom();
}

function ChangeText(imgNum) {
   document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}

window.addEventListener("load", function() {
 update_dom();
   sliderInterval = window.setInterval( slideA, 3000);
   document.getElementById("right").addEventListener("click", function() {
    slide(1);
   });
  
   document.getElementById("left").addEventListener("click", function() {
    slide(-1);
   });
});

#slideshow {
  height: 450px;
  width: 650px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  border-radius: 10px;
}
#img {
  height: 450px;
  width: 650px;
}
#left_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
}
#right_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.left {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  left: 0px;
}
.right {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  right: 0px;
}
#text1 {
  position: absolute;
  color: #fff;
  font-size: 32px;
  background-color: #000;
  opacity: 0.5;
  left: 37%;
  z-index: 2;
}

<div id="slideshow">
  <div id="text1">Text</div>
  <img src="images/img0.jpg" id="img" />
  <div id="left_holder">
    <img id="left" class="left" src="images/arrow_left.png" />
  </div>
  <div id="right_holder">
    <img id="right" class="right" src="images/arrow_right.png" />
  </div>
</div>

Answer 1

尝试

indexCount = imagescount = makeUniqueRandom();

而不是

 imagescount = makeUniqueRandom();

Javascript 标题与图片相符的幻灯片

Javascript slideshow with titles fitting the images

html

javascript

css

slideshow