JS切换图片问题
<scripttype="text/javascript">functionshubiao(i){if(i){document.getElementById("da"+i...
<script type="text/javascript">
function shubiao(i)
{
if (i)
{
document.getElementById("da"+i).className = "zuobo1";
document.getElementById("dian"+i).className = "youbo1";
}
else
{
document.getElementById("da"+i).className = "zuobo2";
document.getElementById("dian"+i).className = "youbo2";
}
}
</script>
<body>
<div class="bofang" >
<div class="zuobo1" id="da1"><img src="image/jyzt/1.jpg" /></div>
<div class="zuobo2" id="da2"><img src="image/jyzt/2.jpg" /></div>
<div class="zuobo2" id="da3"><img src="image/jyzt/3.jpg" /></div>
<div class="youbo">
<div class="youbo1" id="dian1" onmouseover="shubiao(1)"></div>
<div class="youbo2" id="dian2" onmouseover="shubiao(2)"></div>
<div class="youbo2" id="dian3" onmouseover="shubiao(3)"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
我想要效果是图中鼠标移到左边色块就会切换不同图片，我写的JS不知道为什么不行 错在哪 谢谢 展开
function shubiao(i)
{
if (i)
{
document.getElementById("da"+i).className = "zuobo1";
document.getElementById("dian"+i).className = "youbo1";
}
else
{
document.getElementById("da"+i).className = "zuobo2";
document.getElementById("dian"+i).className = "youbo2";
}
}
</script>
<body>
<div class="bofang" >
<div class="zuobo1" id="da1"><img src="image/jyzt/1.jpg" /></div>
<div class="zuobo2" id="da2"><img src="image/jyzt/2.jpg" /></div>
<div class="zuobo2" id="da3"><img src="image/jyzt/3.jpg" /></div>
<div class="youbo">
<div class="youbo1" id="dian1" onmouseover="shubiao(1)"></div>
<div class="youbo2" id="dian2" onmouseover="shubiao(2)"></div>
<div class="youbo2" id="dian3" onmouseover="shubiao(3)"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
我想要效果是图中鼠标移到左边色块就会切换不同图片，我写的JS不知道为什么不行 错在哪 谢谢 展开
展开全部
下面用jquery写的。你这个和选项卡类似：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jane shopping</title>
<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".rightbox").click(function(){//选取class为rightbox的元素
$(this).addClass("this").siblings().removeClass("this")//给选中的当前元素加上.this，同时同辈元素（.rightbox）中的.this
$this =$(".right .rightbox");
$sy = $this.index(this)//取得当前索引
$(".left .leftbox").eq($sy).show().siblings().hide()//显示同.rirhtbox索引相同的。leftbox的DIV，并隐藏同辈.leftbox的DIV
});
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
.testbox{ width:600px; height:250px; border:1px solid green;}
.left{ float:left; width:400px;}
.leftbox{ widht:390px; height:230px; border:1px solid #333; margin:10px 0 0 10px; display:none;}
.right{ float:left; width:120px; margin:10px 0 0 10px;}
.rightbox{ width:110px; background:#eee; height:50px; margin-top:10px;cursor:pointer;}
.this{ border:2px solid blue;}
</style>
</head>
<body>
<div class="testbox">
<div class="left">
<div class="leftbox" style="display:block;">图片1</div>
<div class="leftbox">图片2</div>
<div class="leftbox">图片3</div>
</div>
<div class="right">
<div class="rightbox">小图1</div>
<div class="rightbox">小图2</div>
<div class="rightbox">小图3</div>
</div>
</div>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jane shopping</title>
<script src="http://www.w3school.com.cn/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".rightbox").click(function(){//选取class为rightbox的元素
$(this).addClass("this").siblings().removeClass("this")//给选中的当前元素加上.this，同时同辈元素（.rightbox）中的.this
$this =$(".right .rightbox");
$sy = $this.index(this)//取得当前索引
$(".left .leftbox").eq($sy).show().siblings().hide()//显示同.rirhtbox索引相同的。leftbox的DIV，并隐藏同辈.leftbox的DIV
});
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
.testbox{ width:600px; height:250px; border:1px solid green;}
.left{ float:left; width:400px;}
.leftbox{ widht:390px; height:230px; border:1px solid #333; margin:10px 0 0 10px; display:none;}
.right{ float:left; width:120px; margin:10px 0 0 10px;}
.rightbox{ width:110px; background:#eee; height:50px; margin-top:10px;cursor:pointer;}
.this{ border:2px solid blue;}
</style>
</head>
<body>
<div class="testbox">
<div class="left">
<div class="leftbox" style="display:block;">图片1</div>
<div class="leftbox">图片2</div>
<div class="leftbox">图片3</div>
</div>
<div class="right">
<div class="rightbox">小图1</div>
<div class="rightbox">小图2</div>
<div class="rightbox">小图3</div>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
function shubiao(i)
{
for(var j=1;j<4;j++){
document.getElementById("da"+j).className = "zuobo2";
document.getElementById("dian"+j).className = "youbo2";
}
document.getElementById("da"+i).className = "zuobo1";
document.getElementById("dian"+i).className = "youbo1";
}
</script>
<body>
<div class="bofang" >
<div class="zuobo1" id="da1"><img src="image/jyzt/1.jpg" /></div>
<div class="zuobo2" id="da2"><img src="image/jyzt/2.jpg" /></div>
<div class="zuobo2" id="da3"><img src="image/jyzt/3.jpg" /></div>
<div class="youbo">
<div class="youbo1" id="dian1" onmouseover="shubiao(1)"></div>
<div class="youbo2" id="dian2" onmouseover="shubiao(2)"></div>
<div class="youbo2" id="dian3" onmouseover="shubiao(3)"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
function shubiao(i)
{
for(var j=1;j<4;j++){
document.getElementById("da"+j).className = "zuobo2";
document.getElementById("dian"+j).className = "youbo2";
}
document.getElementById("da"+i).className = "zuobo1";
document.getElementById("dian"+i).className = "youbo1";
}
</script>
<body>
<div class="bofang" >
<div class="zuobo1" id="da1"><img src="image/jyzt/1.jpg" /></div>
<div class="zuobo2" id="da2"><img src="image/jyzt/2.jpg" /></div>
<div class="zuobo2" id="da3"><img src="image/jyzt/3.jpg" /></div>
<div class="youbo">
<div class="youbo1" id="dian1" onmouseover="shubiao(1)"></div>
<div class="youbo2" id="dian2" onmouseover="shubiao(2)"></div>
<div class="youbo2" id="dian3" onmouseover="shubiao(3)"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
更多追问追答
追问
纠结 为什么要加这个for(var j=1;j<4;j++){
追答
初始化
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
