js点小图显示大图的切换功能代码

<！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.onload = 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><ul id="imgList"></ul> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]