CODEWITHSUNDEEP
javascripthtmlslideshow
yukashima huksay
yukashima huksay

Reputation: 6238

html/javascript slideshow does not work

i want to have a slideshow in my webpage but my code isnt working. here is my html:

<body>
<script type="text/javascript">
var slideNumber = 1;
function slide() {
    document.getElementById("slideshow").src = "../images/slideshow/" + slideNumber + ".jpg";
    slideNumber++;
    if (slideNumber == 5) {
        slideNumber = 1;
    }
    setTimeout("slide()",2500);
}
slide();
</script>
<img id="slideshow" src="../images/slideshow/1.jpg" width="500" height="300"/>
</body>

Why doesn't it work as expected?

Upvotes: 0

Views: 100

Answers (3)

Victor Levin
Victor Levin

Reputation: 1177

Working Fiddle: https://jsfiddle.net/uff8nydv/

var slideNumber = 1;

function slide() {

    document.getElementById("slideshow").src = "../images/slideshow/" + slideNumber + ".jpg";    
    console.log("../images/slideshow/" + slideNumber + ".jpg");

    slideNumber++;

    if (slideNumber == 5) {
        slideNumber = 1;
    }

    setTimeout(slide,500);
}

slide();

Also make sure you identifiy <img> as id="slideshow"

<body>
    <img src="../images/slideshow/1.jpg" width="500" height="300" id="slideshow"/>
</body>

Upvotes: 3

Bruno Caceiro
Bruno Caceiro

Reputation: 7179

You have to add the id="slideshow" to

  img src="../images/slideshow/1.jpg" id="slideshow" width="500" height="300"

in order to change the image.

Upvotes: 0

danielaKay
danielaKay

Reputation: 189

The setTimeout calls a function slideit() that doesn't exist in your code. Chaning it to slide() might work better.

Also, the evalis unnecessary, and the script chokes because you're trying to access an element #slideshow via getElementById("slideshow")that doesn't exist in your code.

Edited: fixed it...

<body>

  <img id="slideshow" src="../images/slideshow/1.jpg" width="500" height="300"/>

<script type="text/javascript">
    var slideNumber = 1;
    function slide() {
        document.getElementById("slideshow").src = "../images/slideshow/" + slideNumber + ".jpg";
        slideNumber++;
        if (slideNumber == 5) {
            slideNumber = 1;
        }
        setTimeout("slide()",1000);
    }
    slide();
</script>

</body>

Upvotes: 0

Related Questions