用javascript播放圖像

Question

我想使用具有某些可控制功能的javascript制作圖像動畫，例如播放，暫停和停止，到目前為止，我已經嘗試了以下方法：

<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>

但是它沒有按預期工作，當我單擊start按鈕時，它沒有顯示任何圖像..

當我單擊開始按鈕並可以播放圖像時，如何使其工作？ 當我單擊停止，它可能會停止..？

我在做什么錯了，問題出在哪里？

Answer 1

一個簡單而差勁的實現..：

<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>

注意事項：

圖片已重命名用於我的測試，您將需要為其命名。
您將需要確保文檔中正在使用的元素已完全加載。
player參與了您的代碼，但是我什么都沒看到，我聲明了一個Player類來創建player 。
使用長文本作為setInterval的code參數是一個壞主意，我改為將其聲明為私有函數（ animate ）。
仔細閱讀如何在代碼中實現play ， pause和stop 。
我不知道currentTime是用來干什么的，就隨它currentTime 。

用javascript播放圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2013-10-13 19:56:09

用javascript播放圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2013-10-13 19:56:09

解決方案1
0 已采納 2013-10-13 19:56:09