I want to make the image animation using JavaScript with some controllable functionality, such as play, pause and stop, the following is so far I've tried: But it doesn't work as expected, when I click on start button it doesn't not show me any image .. How can I make it work, as when I click on the start button

Play images in JavaScript

I want to make the image animation using JavaScript with some controllable functionality, such as play, pause and stop, the following is so far I’ve tried:

<html>
<head>
    <title>Image Player</title>
    <script type="text/javascript" language="javascript">
        window.onload=function () {
            var rotator=document.getElementById("slideshow_content");
            var images=rotator.getElementsByTagName("img");
            for (var i=1; i<images.length; i++) {
                images[i].style.display="none";
            }
            var counter=1;
            setInterval(function () {
                for (var i=0; i<images.length; i++) {
                    images[i].style.display="none";
                }
                images[counter].style.display="block";
                counter++;
                if (counter==images.length) {
                    counter=0;
                }
            }, 3000);

            function playimage() {
                player.play();
            }

            function pauseimage() {
                player.pause();
            }

            function stopimage() {
                player.pause();
                player.currentTime=0;

            }
        };

    </script>
</head>
<body>
    <div id="slideshow">
        <div id="slideshow_content" width="200px" height="200px" 
            style="padding-top: 10px; padding-bottom: 10px;">
            <img alt="" src="a.jpg" />
            <img alt="" src="b.jpg" />
            <img alt="" src="c.jpg" />
            <img alt="" src="d.jpg" />
            <img alt="" src="e.jpg" />
            <img alt="" src="f.jpg" />
        </div>
        <button onclick="playimage()">
            Play</button><br />
        <button onclick="pauseimage()">
            Pause</button><br />
        <button onclick="stopimage()">
            Stop</button><br />
    </div>
</body>
</html>

But it doesn’t work as expected, when I click on start button it doesn’t not show me any image ..

How can I make it work, as when I click on the start button and the images could be played; when I click on stop and it could stop .. ?

What I’m doing wrong and where is the problem?

Answer

A simple and poor implementation .. :

<html>
<head>
    <title>Image Player</title>
</head>
<body>
    <script>
        function Player() {
            var rotator=document.getElementById('slideshow_content');
            var images=rotator.getElementsByTagName('img');
            var intervalID;
            var counter=1;

            function animate() {
                var i;

                for (i=0; i<images.length; i++) {
                    images[i].style.display='none';
                }

                images[counter].style.display='block';

                counter++;

                if (counter==images.length) {
                    counter=0;
                }
            }

            this.pause=function () {
                if (undefined!==intervalID) {
                    window.clearInterval(intervalID);
                    intervalID=undefined;
                }
            };

            this.stop=function () {
                this.pause();

                for (var i=1; i<images.length; i++) {
                    images[i].style.display='none';
                }
            };

            this.play=function () {
                if (undefined===intervalID) {
                    intervalID=window.setInterval(animate, 1000);
                }
            };

            this.stop();
            this.currentTime=0;
        }

    </script>
    <script>
        function playimage() {
            player.play();
        }

        function pauseimage() {
            player.pause();
        }

        function stopimage() {
            player.stop();
            player.currentTime=0;
        }

        function Page_Load() {
            player=new Player();
            player.play();
        }

        document.onreadystatechange=function () {
            if ('complete'==document.readyState) {
                Page_Load();
            }
        };

        var player; 

    </script>
    <div id='slideshow'>
        <div id='slideshow_content' width='200px' height='200px' style='padding-top: 10px; padding-bottom: 10px;'>
            <img src='a.jpeg' />
            <img src='b.jpeg' />
            <img src='c.jpeg' />
            <img src='d.jpeg' />
        </div>
        <input type='button' value='Play' onclick='playimage();' />
        <input type='button' value='Pause' onclick='pauseimage();' />
        <input type='button' value='Stop' onclick='stopimage();' />
    </div>
</body>
</html>

Some things to note:

Images are renamed for my testing, you will need to name them as your requirement.
You will need to ensure the elements you are using of the document are complete loaded.
player is involved in your code, but I’ve seen it nowhere, and I declared a Player class for creating the player.
Use a long text as the code argument of setInterval is a bad idea, I declared it a private function(animate) instead.
Read carefully how the play, pause and stop is implemented within the code.
I have no idea what currentTime is used for, just stay with it.

Advertisement

Answer