Question

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

<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>

希望它能帮到你。

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

1 个答案: