如果不存在则跳过图像（轮播）

Question

我正在尝试显示文件夹中的图像，但是当图像不存在时。 我希望它跳到下一个。 我在这里使用“不显示”。 下面是代码。 提前致谢。 抱歉，有任何错误。

<div class="w3-content w3-section" style="position:fixed; height: 100%; width:100%;">
<img class="mySlides" src="uploads/1.JPG" align="middle" >
<img class="mySlides" src="uploads/2.JPG" align="middle">
<img class="mySlides" src="uploads/3.JPG" align="middle">
<img class="mySlides" src="uploads/4.JPG" align="middle">
</div>

<script>

var myIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  

}
myIndex++;
if (myIndex > x.length) {myIndex = 1}    
x[myIndex-1].style.display = "block";  //For Eg if 1.JPG is not found it displays black screen for 5secs.
  setTimeout(carousel, 5000); // Change image every 5 seconds

 }
</script>

Answer 1

在每个img 标签中添加属性onerror

<div class="w3-content w3-section" style="position:fixed; height: 100%; width:100%;">
<img class="mySlides" src="uploads/1.JPG" onerror="this.remove()" align="middle" >
<img class="mySlides" src="uploads/2.JPG" onerror="this.remove()" align="middle">
<img class="mySlides" src="uploads/3.JPG" onerror="this.remove()" align="middle">
<img class="mySlides" src="uploads/4.JPG" onerror="this.remove()" align="middle">
</div>

希望能帮到你。