Javascript 图片幻灯片

Question

我正在为我的学校项目创建一个网站。我想在幻灯片放映中放一些图片，但出于某种原因我的代码无法正常工作。这是我的代码

   <div class="row">
     <div class="col-md-12">
       <h3 class = "Contains">
          <script type = "text/javascript">
            var image1= new image()
            image1.src=images/truck1.png

            var image2= new image()
            image2.src=images/truck4.png

            var image3= new image()
            image3.src=images/truck7.png

          </script>
          <img src="images/truck1.PNG" name = "slide" width ="400" height ="400">

          <script>
            var step =1;

            function slideit(){
              document.images.slide.src=eval("image"+step+".src");
              if (step<3)
                step++;
              else
                step=1;

              setTimeout("slideit()", 2500);
            }

            slideit()
          </script>
     </h3>
</div>

Answer 1

您的问题很可能出在您的 "imagex.src=xxxxxxx" 上。图片 url 是字符串，必须这样引用。所以应该是：

image1.src="images/truck1.png"

此外，您尝试使用字符串而不是函数来调用 setTimeout reference/name。应该是：

setTimeout(slideit, 2500);

但是，这里最好使用 setInterval 而不是 setTimeout，因为它会重复调用一个函数。

JS 除了 HTML 部分还有一些怪癖。大多数情况下，您不应该使用 H3 来包装 div。 H3 通常用于页面 sub-titles，不适用于 400x400 图像 ^^

正如您在问题评论中提到的，使用 eval 通常不是一个好主意。

要简化，您可以这样做：

<div class="row">
    <div class="col-md-12">
        <div class="Contains">
            <img src="images/truck1.PNG" name="slide" width="400" height="400">
            <script>
                var pictures = ["images/truck1.png",
                                "images/truck4.png",
                                "images/truck7.png"];

                var step = 0;

                function slideIt(){
                    if (step<3)
                        step++;
                    else
                        step=0;

                    document.images.slide.src=pictures[step];
                }

                setTimeout(slideit, 2500);
            </script>
        </div>
    </div>
</div>

Answer 2

一个非常基本和简单的示例，说明如何单步执行数组

//Array of images
var Images = ['https://dummyimage.com/100x100/000/fff.jpg',
  'https://dummyimage.com/200x200/000/fff.jpg',
  'https://dummyimage.com/300x300/000/fff.jpg'
];
//Step counter
var step = 1;

function gallery() {
  //change image
  document.getElementById('Imgs').src = Images[step];
  //Or you can use - document.images.slide.src=Images[step];
  // is step more than the image array?
  if (step < Images.length - 1) {
    // No - add 1 for next image.
    step++;
  } else {
    // Yes - Start from the first image
    step = 0;
  }
}
//When the ready, set interval.
window.onload = setInterval(gallery, 2500);

<img id="Imgs" name="slide" src="https://dummyimage.com/100x100/000/fff.jpg" />

您尝试的方法将return在浏览器控制台中出现以下错误。

Uncaught ReferenceError: image is not defined(anonymous function)

Uncaught TypeError: Cannot read property 'src' of undefined

在使用 javascript 时，浏览器控制台是您最好的朋友。

如有任何问题，请在下方留言，我会尽快回复您。

如果您想在这里坚持使用相同的方法，那就是：

var step = 1;
var image1 = new Image();
image1.src = "https://dummyimage.com/100x100/000/fff.jpg";
var image2 = new Image();
image2.src = "https://dummyimage.com/200x200/000/fff.jpg";
var image3 = new Image();
image3.src = "https://dummyimage.com/300x300/000/fff.jpg";

function slideit() {
  document.images.slide.src = window['image' + step].src;
  if (step < 3)
    step++;
  else
    step = 1;
  setTimeout(slideit, 2500);
}
slideit();

<div class="row">
  <div class="col-md-12">
    <h3 class="Contains">
      <img src="https://dummyimage.com/100x100/000/fff.jpg" name="slide" />
    </h3>
  </div>

希望对您有所帮助。编码愉快！

Javascript 图片幻灯片

Javascript images slide

javascript

image

slideshow