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

时间：2021-01-09 11:14:32|栏目：JavaScript代码|点击：次

<!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>         <div id="bImg"></div>         <ul id="imgList"></ul>     </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：浅谈Javascript面向对象编程

栏目：JavaScript代码

下一篇：基于javascript实现精确到毫秒的倒计时限时抢购

本文标题：js点小图显示大图的切换功能代码

本文地址：http://www.codeinn.net/misctech/42603.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程