zoukankan      html  css  js  c++  java
  • JS对img进行操作

       <script type="text/javascript">
            var i = 1; var n;
            function showImg() {

                if (document.getElementById('img').getAttribute("src") == "images/1.jpg") {
                    document.getElementById('img').setAttribute("src","images/2.jpg");
                }
                else {
                     document.getElementById('img').setAttribute("src","images/1.jpg");
                }
            }

            function showImg1() {
                document.getElementById('img').setAttribute("src", "images/" + i + ".jpg"); i++;
                if (i > 10)
                {
                    i = 1;
                }
            }


            function show() {
              n=setInterval(showImg1, 500);
            }

            function show1() {
                clearInterval(n);
            }
        </script>

    </head>
    <body>
        <img id="img" alt="" src="images/1.jpg" width="200" height="200" />
        <input id="Button1" type="button" value="换图片" onclick="showImg()" />
        <input id="Button2" type="button" value="切图" onclick="showImg1()" />
        <input id="Button3" type="button" value="轮换" onclick="show()" />
            <input id="Button4" type="button" value="停止轮换" onclick="show1()" />

    </body>
    </html>

  • 相关阅读:
    HTML5_音视频标签 <audio> 和 <video>
    HTML5_提供的 新功能_less 编译_
    HTML5_新标签
    CSS3_综合案例
    CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条
    CSS3_移动端_开机动画
    CSS3_动画 animation
    剑指Offer-2.替换空格(C++/Java)
    MySQL学习笔记4——DQL
    MySQL学习笔记3——DCL
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3024900.html
Copyright © 2011-2022 走看看