JS Radio 改变图片轮换

来源:互联网 发布:矩阵一致性检验 编辑:程序博客网 时间:2024/06/05 19:13

<!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 UpdateImg(radio) {
            document.getElementById('img1').setAttribute('src', 'images/' + radio.getAttribute('value') + '.jpg');

 //var numb = radio.getAttribute('value'); //获取被选中的单选按钮的value值
            //document.getElementById('img1').setAttribute('src', 'images/' + numb + '.jpg'); //设置要加载的图片
       
        }

          

    </script>
</head>
<body>
<img id="img1" src="images/09.jpg" width="200px" height="200px" />
    <br />
    <input type="button" value="改变图片" onclick="UpdateImg();" />
    <br />
    <input id="Radio1"  name="动物" type="radio" value="2" onclick="UpdateImg(this);"/>忧伤的小狗
    <input id="Radio2"  name="动物" type="radio" value="3" onclick="UpdateImg(this);"/>卖萌的小?狗
    <input id="Radio3"  name="动物" type="radio" value="4" onclick="UpdateImg(this);"/>愤怒的小狗
    <input id="Radio4"  name="动物" type="radio" value="6" onclick="UpdateImg(this);"/>可爱的小猫
可爱的小猫

</body>
</html>