js变换显示图片的实例
js变换显示图片的实例
发布时间:2016-12-30 来源:查字典编辑
摘要:开始界面如图:复制代码代码如下:functionUpdateImg(){//document.getElementById('img1')....

开始界面如图:

js变换显示图片的实例1

复制代码 代码如下:

<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="改变图片" />

<br />

<input id="Radio1" name="dogandcat" type="radio" value="2" />忧伤的小狗

<input id="Radio2" name="dogandcat" type="radio" value="3"/>卖萌的小狗

<input id="Radio3" name="dogandcat" type="radio" value="4"/>愤怒的小狗

<input id="Radio4" name="dogandcat" type="radio" value="6"/>可爱的小猫

</body>

下面是程序运行时的界面:点击不同的按钮图片是不一样的

js变换显示图片的实例2

js变换显示图片的实例3

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类