DOM节点

来源：互联网发布：fyzf后缀是什么软件编辑：程序博客网时间：2024/06/06 09:48

学习Dom做的练习，这是程序运行时的界面，

点击显示按钮，就会变成另一张图片，下面的是效果图：

下面是程序的代码

、、、、、、、、、、、、、、图片显示
        var num = 0;
        function showinfo() {
            num++;
            if (num % 2 == 0) {
                document.getElementById('img1').setAttribute('src', 'images/1.jpg');
            }
            else {
                document.getElementById('img1').setAttribute('src', 'images/2.jpg');
              }
        }

、、、、、、、、、、、图片轮换、、、、、、、、、、、、、
        var imgnumb = 1;
        function showimg() {
            imgnumb++;
            document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg');
            if (imgnumb == 8) {
                imgnumb = 0;
            }
        }

、、、、、、、、、、、、、停止、、、、、、、、、、、、、、、
        var id;
        function stop() {
            clearInterval(id);
         }
    </script>
</head>
<body>
    <img src="images/1.jpg" class="style1" id="img1" alt="" width="200px"/>
    <input id="Button1" type="button" value="显示" onclick="showinfo();"/>
    <input id="Button2" type="button" value="图片轮换" onclick="showimg();"/>
    <input id="Button3" type="button" value="停止" onclick="stop();"/>
</body>

上面这一张是点击图片轮换按钮轮换的图片。