rotating images in html

javascript image slideshow

15,311

Solution 1

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var image1 = new Image()
        image1.src = "dummyImg1.jpg"

        var image2 = new Image()
        image2.src = "dummyImg2.jpg"

        var image3 = new Image()
        image3.src = "dummyImg3.png"
    </script>
</head>
<body>
    <img src="dummyImg1.jpg" name="slide" >
    <script type="text/javascript">
        var step = 1
        function slideit() {
            document.images["slide"].src = eval("image" + step + ".src")
            if (step < 3)
                step++
            else
                step = 1
            setTimeout("slideit()", 5000)
        }
        slideit()
    </script>
</body>
</html>

Solution 2

Your setTimeout function is incorrect, as you are passing it a string, not a function, and you don't close your function. It is also very inefficient to create a new image item every time; an array will suit you much better. Finally, I think you want to use setInterval not setTimeout.

A working example is here: http://jsfiddle.net/HUP5W/2

Obviously, the images don't work, but, if you look at the console, it is working correctly.

var image = document.getElementById("img1");
var src = ["concert2.gif","concert3.gif","concert4.gif","concert5.gif","concert1.gif"];

var step=0
    function slideit() { 
        image.src = src[step];
        image.alt = src[step];
        if(step<4) {
            step++;
        } else {
            step=0;
        }
    }        
    setInterval(slideit,5000);

15,311

user2863675

Updated on June 04, 2022

Comments

user2863675 almost 2 years

hello everyone i'm trying to get these images to rotate every 5 seconds in HTML, using javascript. I cant figure out why images are not rotating, if someone could assist me that would be great!! thank you.

<!DOCTYPE html>
<html>

<head>

<title>Concert Ads</title>

<script type="text/javascript">

var image1=new Image()
image1.src="concert1.gif"

var image2=new Image()
image2.src="concert2.gif"

var image3=new Image()
image3.src="concert3.gif"

var image4=new Image()
image4.src="concert4.gif"

var image5=new Image()
image5.src="concert5.gif"


</script>

</head>

<body>

<img src="concert1.gif" name="slide" >

<script type="text/javascript">


var step=1
function slideit() { 
document.images.slide.src=eval("image"+step+".src")

if(step<5)

step++

else

step=1

setTimeout("slideit()",5000)

slideit()

</script>

</body>


</html>

putvande over 10 years

or setTimeout(slideit,5000)
Michael Besteck over 10 years

Why this downvote? This is a working demo (Firefox 24.0 / Linux).
Dominic Green over 10 years

No problem I just made a small tweek in the example to fix an index issue, if it solves your problem dont forget to mark as answered and good luck.
Dominic Green over 10 years

Down voted because you gave no explanation, just sticking up code doesn't help any one relaise what there problems are. Also you setTimout is within you function so will loop 3 times instanatly, and not be able to reference slideit. See jsfiddle.net/L4bTX/1
Michael Besteck over 10 years

@Dominic Green: you wrote "just sticking up code doesn't help any one relaise what there problems are". I am not sure if i understand you because leo.org -i am not a native english speaker- does not know any translation for "relaise". At least the asker, user2863675, commented "thank you for your help!". So, your "doesn't help any one" is definitely wrong, especially as user2863675's comment was posted before yours.
Michael Besteck over 10 years

@Dominic Green (continued): Also, you wrote "Also you setTimout is within you function so will loop 3 times instanatly, and not be able to reference slideit.". If have problems (even ignoring your faulty english) to understand what you mean with that sentence. No, there is no "loop" inside the function "slideit" (as i noted it), it is just a call to "itself" after 5s, triggering the loop as wanted. And yes, there is a reference on "slideit" just after the function calling it the first time.
Michael Besteck over 10 years

@Dominic Green (continued): So, you critics is in it's first part not true, in the second part either inapprehensible or simply wrong. All in all i can not see any reasonable reason for your downvote.
Dominic Green over 10 years

The point is that some one will not learn from you just sticking up code. Im not on a forum like this to argue, good luck in the future. But you should check the jsfiddle I put up which has an example of your code in there. If you look at the console you will see that there is indeed an error slideit is not defined.
Michael Besteck over 10 years

@Dominic Green: First i recognize that you did not argue against my arguments. Second, my solution was close to the offered code by the asker and user user2863675 himself commented a "thank you", which means he understood my help. Third, if i load the code i posted in my own browser (Firefox 24.0 / Linux) the console does not show any "slideit is not defined" message. Fourth, i am, like you, not on stackoverflow to argue, but i do not like to be downvoted causeless. Fifth, irony and sarcasm should be not posted here, if there are discrepancies, they should be cleared by logical arguments.
Michael Besteck over 7 years

@Dominic Green Dear Dominic, please see developer.mozilla.org/en-US/docs/Web/API/… to learn that passing a String to the setTimeout function is not incorrect, it is an alternate way to do it. Using setInterval instead of setTimeout may cause problems if some long running JavaScript delays page execution. Using setTimeout guarantees that even delays longer 5000ms will cause no confusion.