如何使用for循环制作javascript幻灯片

How to make a javascript slideshow using for loop

本文关键字：javascript 幻灯片 循环 何使用 for      更新时间：2023-09-26

我想使用for循环制作一个javascript幻灯片Javascript代码

        var Image_slide = new Array("img1.jpg", "img2.jpg", "img3.jpg");// image container
    var Img_Lenght = Image_slide.length; // container length - 1
    function slide(){
        for (var i = 0; i < Img_Lenght; i++) {
        Image_slide[i];
        };
        document.slideshow.src = Image_slide[i];
    }
    function auto(){
        setInterval("slide()", 1000);
    }
    window.onload = auto;

html代码

<img src="img1.jpg" name="slideshow">

我不知道这段代码有什么问题——它只是连续运行img3而没有循环img1，它还从循环中跳过img2

要解决这个问题，比使用for循环更好的选择是一起跳过for循环。使用for循环确实太复杂了，而且有一个简单得多的解决方案。

不使用for循环，只需直接分配幻灯片并跟踪定位：

var Image_slide = new Array("img1.jpg", "img2.jpg", "img3.jpg");// image container
var Img_Length  = Image_slide.length; // container length - 1
var Img_current = 0
function slide() {
    if(Img_current >= Img_Length) {
        Img_current = 0;
    }
    document.slideshow.src = Image_slide[Img_current];
    Img_current++;
}
function auto(){
    setInterval(slide, 1000);
}
window.onload = auto;

间隔应该已经运行。汽车内部的环路是多余的，只是把它搞砸了。每次只需要获得一个数组元素，而不是整个循环。每次循环它只会返回最后一个结果。

你需要跟踪你的位置，一旦达到最大长度，就将位置重置为0。

我还建议间隔至少3秒，而不是1秒。一秒钟我觉得有点太快了。

以下是JSFiddle上正确解决方案的示例：http://jsfiddle.net/LUX9P/

也就是说，现在的问题实际上是问如何让它与for循环一起工作。我已经为这个问题写了一个潜在的解决方案（未经测试，所以我不能保证它会起作用），但我强烈建议不要这样做。总的来说，它应该不会太糟糕，只是要复杂得多，而且上面的解决方案太简单了，这个解决方案真的不值得

var Image_slide = new Array("img1.jpg", "img2.jpg", "img3.jpg");// image container
var Img_Length = Image_slide.length; // container length - 1
function slide(){
    delay = 0;
    start = false;
    for (var i = 0; i < Img_Length; i++) {
        if(start && delay < 1000) {
            delay += 1;
            i--;
        }
        else {
            document.slideshow.src = Image_slide[i];
            delay = 0;
        }
        start = true;
    }
}
function auto(){
    setInterval("slide()", 1000);
}
window.onload = auto;

我不能保证这会起作用，但本质上，我在slide（）中更新的代码初始化了一个延迟变量和一个开始变量。当循环运行一次时，它会自动激活start，并始终设置源中的第一个值。

一旦设置了start，每连续一次它都会增加延迟变量，直到延迟达到1000，并且它会减少i变量，这样for循环就不会在cap（数组的长度）上增加i。基本上，它将i向后设置一，这样for中的增量就可以将它放回它应该在的位置，防止它移动到下一个变量，直到它最终处理当前条目。

从理论上讲，这应该是可行的。不过，您可能需要大幅增加延迟；1000实际上不应该等于1秒；它可能会比这快得多。但我可能错了；它可能会在一秒钟内用完，我还没有机会尝试一下。

很明显，这件事的复杂性很高，不值得。应该使用我的第一个选项。

相关文章：