Fatal编程技术网

用javascript播放图像

javascript asp.net

用javascript播放图像,javascript,asp.net,javascript-events,Javascript,Asp.net,Javascript Events,我想使用javascript制作图像动画，并提供一些可控功能，如播放、暂停和停止，到目前为止，我已经尝试了以下内容： <html> <head> <title>Image Player</title> <script type="text/javascript" language="javascript"> window.onload=function () { var rotat

我想使用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>


图像播放器
window.onload=函数（）{
var rotator=document.getElementById（“幻灯片内容”）；
var images=rotator.getElementsByTagName（“img”）；

对于（var i=1；i一个简单而糟糕的实现…：


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




图像播放器
函数播放器（）{
var rotator=document.getElementById（'slideshow_content'）；
var images=rotator.getElementsByTagName（'img'）；
var有效期；
var计数器=1；
函数animate（）{
var i；

对于（i=0；i检查javascript控制台并查找错误。首先，按钮上的
onclick
处理程序正在传递
element
，但该变量从未定义。您的意思是
nextImage（'element'））
？代码中缺少了两个右大括号。一个用于循环的
，另一个用于函数范围。（当然，纠正这一点并不能解决您的问题。）@Chris plz看到我更新的代码工作，但当我调试图像自动播放，当我点击停止按钮，它不能停止图像..现在我想当我调试，然后点击播放按钮，然后图像将播放，当点击停止，它必须停止你说的差是什么意思implementation@MysimpleWorld当前位置我的意思是我没有设计它在一个好的模式中，简单地编写了可行的代码。。