CODEWITHSUNDEEP
javascripthtml
mirsahib
mirsahib

Reputation: 445

How to make a javascript slideshow using for loop

I want to make a javascript slideshow using a for loop Javascript code

        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

<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

Upvotes: 0

Views: 13932

Answers (1)

JaidynReiman
JaidynReiman

Reputation: 984

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.

Rather than using a for loop, simply assign the slides directly and keep track of positioning:

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.

I'd also recommend at least 3 seconds for the interval instead of 1 second. One second I think is a bit too fast.

Here's an example of the correct solution on 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.

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.

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.

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.

Clearly, the complexity of this is quite high, its just not worth it. My first option should be used instead.

Upvotes: 4

Related Questions