zoukankan      html  css  js  c++  java
  • JS更换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
         // 方法一(麻烦)
            function put() {
                var len = document.getElementsByName('RA');
                for (var i = 0; i < len.length; i++) {
                    if (len[i].checked == true) {
                        var a = len[i].getAttribute('value');
                    switch (a){
                        case '1':
                            document.getElementById('img1').setAttribute('src', 'images/1.jpg');
                            break;
                        case '2':
                            document.getElementById('img1').setAttribute('src', 'images/2.jpg');
                            break;
                        case '3':
                            document.getElementById('img1').setAttribute('src', 'images/3.jpg');
                            break;
                        default:
                            document.getElementById('img1').setAttribute('src', 'images/4.jpg');
                            break;
                        }
                    }
                }
        }


        //方法二(简单)
        function UpdateImg(radio) {
            //简写方式
            //document.getElementById('img1').setAttribute('src', 'images/' + radio.getAttribute('value') + '.jpg');
            var numb = radio.getAttribute('value'); //获取被选中的单选按钮的value值
            document.getElementById('img1').setAttribute('src', numb); //设置要加载的图片


        }
        </script>
    </head>
    <body>
    <img id="img1" src="images/9.jpg" width="200px" height="200px" />
    <br />
        <!--方法一-->
        <input id="Radio1" type="radio" name="RA" onclick="put();" value="1" />忧伤的小狗
        <input id="Radio2" type="radio" name="RA" onclick="put();" value="2" />卖萌的小狗
        <input id="Radio3" type="radio" name="RA" onclick="put();" value="3" />愤怒的小狗
        <input id="Radio4" type="radio" name="RA" onclick="put();" value="4" />可爱的小猫
        <br />
        <!--方法二-->
        <input id="Radio5" type="radio" name="RB" onclick="UpdateImg(this);" value="images/1.jpg" />忧伤的小狗
        <input id="Radio6" type="radio" name="RB" onclick="UpdateImg(this);" value="images/2.jpg" />卖萌的小狗
        <input id="Radio7" type="radio" name="RB" onclick="UpdateImg(this);" value="images/3.jpg" />愤怒的小狗
        <input id="Radio8" type="radio" name="RB" onclick="UpdateImg(this);" value="images/4.jpg" />可爱的小猫
    </body>

    </html>

    开始界面,默认一张图片

    点击忧伤的小狗图片更换

     

  • 相关阅读:
    Jquery 复习01
    工具和资源
    常用 npm 和 yarn 命令
    Jenkins 安装 ruby-runtime 出错
    shiro+jwt 实现权限控制
    Sql Server 2008 R2 查询一个实例中存在某个表的数据库
    使用sqlcmd执行连接的时候一直报有语法错误
    Linux信号
    记一次内存爆涨分析 , JVM命令使用
    Java,List操作技巧
  • 原文地址:https://www.cnblogs.com/duanlinlin/p/3024353.html
Copyright © 2011-2022 走看看