题意：在界面上有一张图片，下面有四个单选按钮，点击每一个按钮图片变换成不同的图片，
开始界面如图：
<head> <title></title> <script type="text/javascript"> function UpdateImg() { //document.getElementById('img1').setAttribute('src', 'images/2.jpg'); var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮 for (var i = 0; i < dogandcat.length; i++) { if (dogandcat[i].checked == true) { var value = dogandcat[i].getAttribute('value'); switch (value) { case '2': document.getElementById('img1').setAttribute('src', 'images/2.jpg'); break; case '3': document.getElementById('img1').setAttribute('src', 'images/3.jpg'); break; case '4': document.getElementById('img1').setAttribute('src', 'images/4.jpg'); break; case '6': document.getElementById('img1').setAttribute('src', 'images/6.jpg'); break; } } } } </script>
</head><body> <img id="img1" src="images/9.jpg" width="200px" height="200px" /> <br /> <input type="button" value="改变图片" οnclick="UpdateImg();" /> <br /> <input id="Radio1" name="dogandcat" type="radio" value="2" οnclick="UpdateImg();" />忧伤的小狗 <input id="Radio2" name="dogandcat" type="radio" value="3" οnclick="UpdateImg();"/>卖萌的小狗 <input id="Radio3" name="dogandcat" type="radio" value="4" οnclick="UpdateImg();"/>愤怒的小狗 <input id="Radio4" name="dogandcat" type="radio" value="6" οnclick="UpdateImg();"/>可爱的小猫</body>
下面是程序运行时的界面：点击不同的按钮图片是不一样的
转载于:https://www.cnblogs.com/qzc900809/archive/2013/04/15/3023219.html
相关资源：JS实现图片切换和数字随图片变换