<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#pic {
width: 300px;
max-width: 0 auto;
border: solid 1px red;
}
#pic input {
margin-right: 45px;
}
</style>
</head>
<body>
<div id="pic">
<div class="img">
<img id="img1" width="300" src="https://fc1tn.baidu.com/it/u=3749855832,2782074224&fm=202&mola=new&crop=v1"
alt="">
</div>
<fieldset>
<legend>选择按钮</legend>
<input type="radio" name="pic" id="pic1" checked>
<input type="radio" name="pic" id="pic2">
<input type="radio" name="pic" id="pic3">
<input type="radio" name="pic" id="pic4">
</fieldset>
</div>
</body>
</html>
<script>
h1 = 'https://fc1tn.baidu.com/it/u=3749855832,2782074224&fm=202&mola=new&crop=v1'
h2 = 'https://fc1tn.baidu.com/it/u=3945866729,4068990335&fm=202&mola=new&crop=v1'
h3 = 'https://fc1tn.baidu.com/it/u=3653652530,1159058521&fm=202&mola=new&crop=v1'
h4 = 'https://fc1tn.baidu.com/it/u=1167662336,2854872509&fm=202&mola=new&crop=v1'
var arr = [h1, h2, h3, h4]
img1 = document.getElementById("img1")
rs = document.getElementsByName("pic")
for (var i = 0; i < rs.length; i++) {
rs[i].onclick = function () {
index = Number(this.id.substring(this.id.length - 1, this.id.length)) - 1
console.log(index)
// img1.src = arr[index];
img1.setAttribute('src', arr[index])
}
}
</script>
<!-- //https://fc1tn.baidu.com/it/u=3749855832,2782074224&fm=202&mola=new&crop=v1 -->
css html js 点击改变图片
最新推荐文章于 2023-05-08 16:42:12 发布