您的位置：首页 > Web前端 > JavaScript

JS更换图片

2015-06-30 13:41 691 查看

<!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>

开始界面，默认一张图片

点击忧伤的小狗图片更换

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航