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

</p> <p> <title>javascript点<a href="https://www.kunjuke.com/tag/56811/" title="小图" target="_blank">小图</a>出<a href="https://www.kunjuke.com/tag/41058/" title="大图" target="_blank">大图</a> 练习 by 阿会楠</title> </p> <p> body{<br /> text-align:center;<br /> margin:0 auto;<br /> }<br /> #imglist li img{<br /> width:80px;<br /> height:80px;<br /> border:1px solid #cccccc;<br /> }<br /> ul li{<br /> list-style:none;<br /> float:left;<br /> margin-left:20px;<br /> cursor:pointer;<br /> }<br /> .rborder{<br /> border:1px solid yellow;<br /> } </p> <p> var img = new array();<br /> img[0] = "/upload/20080918164412320.jpg";<br /> img[1] = "/upload/20080918164413758.jpg";<br /> img[2] = "/upload/20080918164414965.jpg";<br /> function $(obj){<br /> return document.getelementbyid(obj);<br /> }<br /> function $img(url){<br /> return "";<br /> }<br /> function changeborder(obj){<br /> for(var j = 0;j < img.length;j++){<br /> $("imglist").getelementsbytagname("li")[j].getelementsbytagname("img")[0].style.bordercolor = "#cccccc";<br /> }<br /> obj.style.bordercolor= "red";<br /> $("bimg").innerhtml = $img(obj.src);<br /> }<br /> window.onload = function(){<br /> for(var i = 0;i < img.length;i++){<br /> $("imglist").innerhtml += "</p> <li>" + $img(img[i]) + "</li> <p>";<br /> }<br /> if($("bimg").innerhtml == ""){<br /> $("bimg").innerhtml = $img(img[0]);<br /> $("imglist").getelementsbytagname("li")[0].getelementsbytagname("img")[0].style.bordercolor = "red";<br /> } </p> <p> } </p> <ul id="imglist"></ul> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]