Question

我试图用JavaScript制作简单的幻灯片。

这是我的index.html

OFLAGS=-O0
__TEXT  __DATA  __OBJC  others  dec     hex
189     0       0       925     1114    45a     node1.o
245     0       0       1105    1350    546     node2.o
214     0       0       1023    1237    4d5     node3.o
198     0       0       970     1168    490     node4.o

OFLAGS=-O1
__TEXT  __DATA  __OBJC  others  dec     hex
119     0       0       977     1096    448     node1.o
119     0       0       1071    1190    4a6     node2.o
119     0       0       1033    1152    480     node3.o
119     0       0       999     1118    45e     node4.o

OFLAGS=-O2
__TEXT  __DATA  __OBJC  others  dec     hex
104     0       0       973     1077    435     node1.o
104     0       0       1069    1173    495     node2.o
104     0       0       1031    1135    46f     node3.o
104     0       0       997     1101    44d     node4.o

OFLAGS=-O3
__TEXT  __DATA  __OBJC  others  dec     hex
104     0       0       973     1077    435     node1.o
104     0       0       1069    1173    495     node2.o
104     0       0       1031    1135    46f     node3.o
104     0       0       997     1101    44d     node4.o

OFLAGS=-Os
__TEXT  __DATA  __OBJC  others  dec     hex
104     0       0       973     1077    435     node1.o
104     0       0       1069    1173    495     node2.o
104     0       0       1031    1135    46f     node3.o
104     0       0       997     1101    44d     node4.o

这是slide.js

<body>
    <h1>Slideshow example</h1>
    <button onclick="slideshow.timer()">Next slide</button>
    <div id="container"></div>
 <script src="slide.js"></script>
</body>

如果我点击＆＃34;下一张幻灯片＆＃34;按钮，我看到两个图像。它遍历整个阵列。当点击按钮时，我怎么能让它在数组中循环一次？

我尝试添加container.innerHTML =＆＃39;＆＃39 ;;这样在添加下一张图像时会删除上一张图像，但这会导致它在sliderImages [1]中显示出图像。我接近这件事是错的吗？

Answer 1

我更新了你的代码。这不是写它的最好方法，但我只是修改了你的例子来向你展示问题。问题是你的计时器功能，它只是一次遍历数组中的所有元素。相反，你可能想要做的是增加一些延迟。

＆＃13;

var slideshow = {
    sliderImages: ["img/img1.png", "img/img2.png"],
    currentImgIndex: 0,
    timer: function() { 
      if (this.currentImgIndex < this.sliderImages.length ) {
        var image = document.getElementById('img');
        image.src= this.sliderImages[this.currentImgIndex];
        this.currentImgIndex++;
        setTimeout(function (){ slideshow.timer()}, 2000)
      } else {
        alert("no more images");
      }
    }
}

＆＃13;

<body>
    <h1>Slideshow example</h1>
    <img id="img"/>
    <button onclick="slideshow.timer()">Next slide</button>
    <div id="container"></div>
    <script src="slide.js"> </script>
</body>

＆＃13;

Answer 2

如果要仅在单击按钮时更改图像，则不需要forEach循环。如果你打算在没有用户交互的情况下更改图像，那么你需要循环，但你也需要setInterval。

如何在JS中制作简单的幻灯片？

2 个答案: