在 javascript 中播放图像答案

【问题标题】：play images in javascript在 javascript 中播放图像
【发布时间】：2013-10-13 18:54:24
【问题描述】：

我想用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 按钮时，它没有显示任何图像..

我怎样才能让它工作，当我点击开始按钮时，图像可以播放；当我单击停止时，它可能会停止..？

我做错了什么，问题出在哪里？

【问题讨论】：

检查您的 javascript 控制台并查找错误。一方面，按钮上的onclick 处理程序正在传递element，但该变量从未定义。你的意思是nextImage('element')？
您在代码中遗漏了 2 个右花括号。一个用于for-loop，另一个用于函数范围。（当然，纠正这个问题并不能解决你的问题..）
@Chris plz 请查看我更新的代码代码有效，但是当我调试图像自动播放时，当我单击停止按钮时它无法停止图像..现在我想在调试时单击播放按钮然后将播放图像，单击停止时必须停止

标签： javascript asp.net javascript-events

【解决方案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 是做什么用的，请继续使用它。

【讨论】：

实施不善是什么意思
@MysimpleWorld：我的意思是我没有很好地设计它的模式，只是写了可行的代码..