老师指点下 为什么我这边点击按钮没法实现切换图片的功能
html
<!DOCTYPE html>
<html>
<head>
<title>图片轮播</title>
<link rel="stylesheet" type="text/css" href="1.css">
<script type="text/javascript" src="1.js"></script>
</head>
<body onload="f1()">
<div id="id">
<div class="name1" id="id1">
<img src="img/bg1.jpg">
</div>
<div class="name1" id="id2">
<img src="img/bg2.jpg">
</div>
<div class="name1" id="id3">
<img src="img/bg3.jpg">
</div>
</div>
<input type="button" value="1" name="input1">
<input type="button" value="2" name="input1">
<input type="button" value="3" name="input1">
</body>
</html>
css
*{
padding:0px;
margin: 0px;
}
#id{
width: 1200px;
height: 460px;
}
.name1{
display: none;
}
#id1{
display: block;
}
js
function f1() {
var arr = document.getElementsByName("input1");
var id1 = document.getElementById("id1");
var id2 = document.getElementById("id2");
var id3 = document.getElementById("id3");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick = function() {
if (arr[i].value == 1) {
id1.display = "block";
alert(1);
} else if (arr[i].value == 2) {
id2.display = "block";
alert(1);
} else {
id3.display = "block";
alert(1);
}
}
}
}
正在回答
同学你好，display 是样式，所以需要通过设置控件的style进行设置。如：Object.style.display=none
祝学习愉快！
同学你好，因在arr[i]并未获取到数据，所以无法实现切换图片，建议同学修改为this.value ，当点击了哪个按钮则显示哪个。修改后代码如下所示：
function f1() {
var arr = document.getElementsByName("input1");
var id1 = document.getElementById("id1");
var id2 = document.getElementById("id2");
var id3 = document.getElementById("id3");
for (var i = 0; i < arr.length; i++) {
arr[i].onclick = function() {
if (this.value == 1) {
id3.style.display = "none";
id2.style.display = "none";
id1.style.display = "block";
// alert(1);
} else if (this.value == 2) {
id1.style.display = "none";
id3.style.display = "none";
id2.style.display = "block";
// alert(1);
} else {
id1.style.display = "none";
id2.style.display = "none";
id3.style.display = "block";
// alert(1);
}
}
}
}如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星