js點(diǎn)小圖顯示大圖的切換功能代碼

2019-11-21 01:37:57

字體：大中小

供稿：網(wǎng)友

<!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點(diǎn)小圖出大圖 練習(xí) by 阿會(huì)楠</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>         <div   class="iwvjtn8m0"   id="bImg"></div>         <ul id="imgList"></ul>     </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：js怎樣實(shí)現(xiàn)下拉框改變，它旁邊的圖像也改變

下一篇：突破winxp sp2/win2003 sp2超強(qiáng)彈窗代碼