运行可以看到效果
<!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=GB2312" />
<title>javascript点小图出大图 练习 by 阿会楠</title>
<style type="text/css">
body{
text-align:center;
margin:0 auto;
}
#imgList li img{
width:80px;
height:80px;
border:1px solid #cccccc;
}
ul li{
list-style:none;
float:left;
margin-left:20px;
cursor:pointer;
}
.rborder{
border:1px solid yellow;
}
</style>
<script language="JavaScript" type="text/javascript">
var img = new Array();
img[0] = "/upload/20080918164412320.jpg";
img[1] = "/upload/20080918164413758.jpg";
img[2] = "/upload/20080918164414965.jpg";
function $(obj){
return document.getElementById(obj);
}
function $img(url){
return "<img src='" + url + "' onclick='changeborder(this)' />";
}
function changeborder(obj){
for(var j = 0;j < img.length;j++){
$("imgList").getElementsByTagName("li")[j].getElementsByTagName("img")[0].style.borderColor = "#cccccc";
}
obj.style.borderColor= "red";
$("bImg").innerHTML = $img(obj.src);
}
window.xywxff = function(){
for(var i = 0;i < img.length;i++){
$("imgList").innerHTML += "<li>" + $img(img[i]) + "</li>";
}
if($("bImg").innerHTML == ""){
$("bImg").innerHTML = $img(img[0]);
$("imgList").getElementsByTagName("li")[0].getElementsByTagName("img")[0].style.borderColor = "red";
}
}
</script>
</head>
<body>
<div id="bImg"></div>
<ul id="imgList"></ul>
</body>
</html>
相关js点小图显示大图的切换功能代码