javascript 如何使用for循环制作javascript幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20137224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a javascript slideshow using for loop
提问by mirsahib
I want to make a javascript slideshow using a for loop Javascript code
我想使用 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 code
html代码
<img src="img1.jpg" name="slideshow">
i can't figure out what is the problem of this code it just run img3 continuously without looping img1 and it also skip img2 from the loop
我无法弄清楚这段代码的问题是什么它只是连续运行 img3 而不循环 img1 并且它还从循环中跳过 img2
回答by JaidynReiman
The better option to solve this than to use a for loop is to simply skip the for loop all-together. Using a for loop is really too complicated and there's a far simpler solution.
解决这个问题比使用 for 循环更好的选择是简单地一起跳过 for 循环。使用 for 循环真的太复杂了，有一个简单得多的解决方案。
Rather than using a for loop, simply assign the slides directly and keep track of positioning:
而不是使用 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;
Interval should already run anyway. The loop inside the auto is redundant and simply messes it up. You only need to get one array element each time, not the whole loop. Looping through it every time will only return the last result.
无论如何，间隔应该已经运行了。汽车内部的循环是多余的，只是把它搞砸了。每次只需要获取一个数组元素，而不是整个循环。每次循环遍历它只会返回最后一个结果。
You need to keep track of your position and reset the position to 0 once you reach the max length.
您需要跟踪您的位置，并在达到最大长度后将位置重置为 0。
I'd also recommend at least 3 seconds for the interval instead of 1 second. One second I think is a bit too fast.
我还建议间隔至少为 3 秒，而不是 1 秒。一秒钟我觉得有点太快了。
Here's an example of the correct solution on JSFiddle: http://jsfiddle.net/LUX9P/
这是 JSFiddle 上正确解决方案的示例：http: //jsfiddle.net/LUX9P/
NOW, that said, the question is actually asking how to make it work with a for loop. I've written up a potential solution to the problem (untested so I can't guarantee it will work), but I HIGHLY ADVISE NOT TO DO IT THIS WAY. It shouldn't be TOO bad overall, its just far more complicated and the solution above is so simple, this solution really isn't worth it.
现在，也就是说，问题实际上是在问如何让它与 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;
I cannot guarantee this will work, but essentially, the code I updated in slide() initializes a delay variable and a start variable. When the loop is run through once, it automatically activates start and always sets the first value in source.
我不能保证这会起作用，但本质上，我在 slide() 中更新的代码初始化了一个延迟变量和一个开始变量。当循环运行一次时，它会自动激活启动并始终设置源中的第一个值。
Once start has been set, every consecutive time it will increment the delay variable until delay hits 1000, and it will decrement the i variable so that the for loop doesn't increment i over the cap (the length of the array). Basically, it sets i back by one so that the increment in for puts it back to where it should be, preventing it from moving on to the next variable until it finally processes the current entry.
设置 start 后，每次连续都会增加延迟变量，直到延迟达到 1000，并且它会减少 i 变量，以便 for 循环不会增加 i 超过上限（数组的长度）。基本上，它将 i 设置为 1，以便 for 中的增量将其放回应有的位置，防止它移动到下一个变量，直到它最终处理当前条目。
This should, in theory, work. You may need to increase the delay significantly though; that 1000 should not actually equal one second; it'll likely go far faster than that. But I may be mistaken; it might run in one second, I haven't had a chance to try it out yet.
这在理论上应该有效。不过，您可能需要显着增加延迟；1000 实际上不应该等于一秒；它可能会比这快得多。但我可能错了；它可能会在一秒钟内运行，我还没有机会尝试。
Clearly, the complexity of this is quite high, its just not worth it. My first option should be used instead.
显然，这的复杂性相当高，只是不值得。应该改用我的第一个选项。
