我的函数正在运行，但它没有显示我在数组中保存的图片

编程问答 2022-05-04

问题描述

我想创建一个幻灯片，又名轮播。但是，我没有看到图像元素中显示任何图像。我不知道我哪里出错了。

var i = 0
var time = 3000;
var images = new Array(3)
var slide = document.getElementById("slide")

images[0] = new Image();
images[0].src = "picture/michael-jordan.jpg"
images[1] = new Image();
images[1].src = "picture/usain-bolt.jpg";
images[2] = new Image();
images[2].src = "picture/zidane.jpg"

console.log(images)

function changeImg() {
  slide.src = images[i];
  if(i < images.length - 1) {
    i++
  } else {
    i = 0;
  }
  setTimeout("changeImg()",time)
}

window.onload=changeImg;
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="index.css">
    <Meta charset="utf-8">
    <title>slideshow</title>
  </head>
  <body>
    <img id="slide" src="" alt="" width="400" height="200">
    <script src="index.js"type="text/javascript"></script>

  </body>
</html>

解决方法

您必须将 CSS 与 Javascript 一起使用。请看一下这个片段。

首先，将slideIndex设置为1。（第一张图）

然后调用 showDivs() 来显示第一张图片。

当用户点击其中一个按钮时调用 plusDivs()。

plusDivs() 函数为 slideIndex 减一或加一。

showDiv() 函数隐藏（display="none"）所有带有 类名“mySlides”，并显示（display="block"）元素 给定的幻灯片索引。

如果slideIndex大于元素数（x.length）， slideIndex 设置为零。

如果 slideIndex 小于 1，则设置为元素数 （x.长度）。

来源：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self

<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">



<button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
arraysarrayscarouselimageimage