CODEWITHSUNDEEP
javascripthtmlslideshow
Manariba
Manariba

Reputation: 376

Slideshow javascript play/pause button

I'm making a slideshow in Javascript with a play/pause button. When I press one time on the button, the slideshow starts to play. When I press a second time, the slideshow has to stop. I only have no idea how to put this function in one button.

Here's my code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Oefening 19.7</title>
    <link href="stijl_Oefening19_6.css" rel="stylesheet" />
    <script>
    var i = 0;
    var foto = new Array(3);
    var timer;

    foto[0] = "images/slideshow/slideshow1.png";
    foto[1] = "images/slideshow/slideshow2.png";
    foto[2] = "images/slideshow/slideshow3.png";
    foto[3] = "images/slideshow/slideshow4.png";

    function slide() {

            document.getElementById("slideshow").src = foto[i];

            if (i < foto.length - 1) i++;
            else i = 0;

            timer = setTimeout("slide()", 3000);
    }
    </script>
</head>

<body>
    <div id="portfolio">
        <img src="images/slideshow/slideshow1.png" id="slideshow" alt="slideshow" />
    </div>
    <div id="button">
        <a href="#" id="startcycle" onclick="slide()">
            <img id="btnCycle" src="images/slideshow/cyclebutton.png" />
        </a>
    </div>
</body>

</html>

Upvotes: 1

Views: 9691

Answers (1)

Ting Yi Shih
Ting Yi Shih

Reputation: 876

Use setInterval() instead. And separate the switch function and the slide function.

function slide() {
    document.getElementById("slideshow").src = foto[i];
    i = (i + 1)%foto.length;
}
function setTimer(){
    if (timer) {
       // stop 
       clearInterval( timer );
       timer=null;
    }
    else {
       timer = setInterval("slide()",1000);
    }
}

Let the button call setTimer().

Upvotes: 2

Related Questions