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>

  • 相关阅读:
    Angular2+学习第1篇 简介
    JS:ES5数组基本操作
    git常用操作命令
    URL-Routing
    uid-datepicker
    元素隐藏 css
    Angular2+学习第2篇 cli 环境搭建过程
    DRF 07
    DRF小练习 04
    DRF小练习 02
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3024900.html
Copyright © 2011-2022 走看看