javascript - 按顺序获取数组中的项目然后重复？

Question

     <img src="link" id="hof" </div> 
    <span id="myspan">Compliment: </span>

    <script type="text/javascript">

        function change() {
        // ---------- Caption and images !! -----------//
        var things = ["Slide01", "Slide04", "Slide05", "Slide06"];
        var captions = ["Very nice", "Awesome", "Cool", "Best"];
        // ^^^^^^^^^^ Captions and Images !! ^^^^^^^^^^ //         

        var image = document.getElementById('hof');
        var thing = things[];
        image.src = "link" + thing + ".jpg"; // change the image   

        span = document.getElementById("myspan");
        span.innerText= "Compliment: " + captions[]; //change caption
        }
        setInterval('change()', 4000);

        </script> 

所以我是 javascript 的新手，我正在尝试制作带字幕的幻灯片，但我需要数组中的值按顺序显示(slide01>slide02>slide03)，然后在达到最后一个值时从头开始重复。

Answer 1

要回答您实际提出的问题:您将使用定义在外部 change 中的index 变量。从 0 开始并(在呈现幻灯片之后)递增它，当您到达 things.length 时环绕。最后一部分有一个技巧:

index = (index + 1) % things.length;

其他说明:

1. 不要使用并行数组，使用对象数组。

   var slides = [
       {name: "Slide01", caption: "Very Nice"},
       // ...
   ];
   

   然后

   var slide = slides[index];
   image.src = "link" + slide.name + ".jpg";
   span.innerText = "Compliment: " + slide.caption + ".jpg";
   

2. 在 change 之外定义该数组，无需在每次调用 change 时都重新创建它。

3. 不要将字符串传递给setInterval 或setTimeout；改为传入函数:

   setInterval(change, 4000);
   

4. 考虑将所有代码包装在一个作用域函数中，这样index、幻灯片数组和change函数就可以了't 全局变量:

   (function() {
       // ...your code here...
   })();