标题适合图像的 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();