0

我想使用具有一些可控功能的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按钮时，它没有显示任何图像..

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

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

4

1 回答 1

0

一个简单而糟糕的实现..：

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

需要注意的一些事项：

  1. 为我的测试重命名图像，您需要根据需要命名它们。

  2. 您需要确保您正在使用的文档元素已完全加载。

  3. player涉及您的代码，但我在任何地方都没有看到它，我声明了一个Player用于创建player.

  4. 使用长文本作为code参数setInterval是个坏主意，我将其声明为私有函数（animate）。

  5. 仔细阅读play,pause和stop是如何在代码中实现的。

  6. 我不知道currentTime它是用来做什么的，只是留下来。

于 2013-10-13T19:56:09.833 回答