急急！要这样的js的特效，下面有许多小图片，上面有一个大图片，点击下面的图片，上面大图片变换 5
2个回答
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style>
#div1 img{width:300px;height:200px;}
#div2 img{width:50px;height:40px;margin:0px;padding:0px;}
</style>
<script>
window.onload=function(){
var div2=document.getElementById("div2");
var imgs=div2.getElementsByTagName("img");
var imgBig=document.getElementById("big");
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
imgBig.src=this.src;
}
}
}
</script>
</head>
<body>
<div id="div1"><img src="imgs/show1_big.jpg" id="big"/></div>
<div id="div2">
<img src="imgs/show1_big.jpg"/>
<img src="imgs/show2_big.jpg"/>
<img src="imgs/show3_big.jpg"/>
<img src="imgs/show4_big.jpg"/>
<img src="imgs/show5_big.jpg"/>
</div>
</body>
</html>
主要思路：当点击下面小图片时触发onclick事件，然后再把大图的路径改成被点击的小图片路径
用js比较麻烦，以下用比较方便的jquery写的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Untitled Document</title>
<script type="text/javascript" src="../lib/jquery/jquery-1.4.2.js"></script>
<style>
img{width:100px;height:100px;}
#big{width:550px;height:400px;}
</style>
<script>
$(document).ready(function(){
$("#big").attr("src","../imgs/1l.jpg"); //加载大图片
$("#big~img").each(function(i){ //加载所有小图片
$(this).attr("src","../imgs/"+(i+1)+"l.jpg");
});
$("#big~img").click(function(){
$("#big").attr("src",this.src);
});
});
</script>
</head>
<body>
<img id="big"/></br>
<img/>
<img/>
<img/>
<img/>
<img/>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
