WEB开发网
开发学院网页设计JavaScript js点小图显示大图的切换功能代码 阅读

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

 2010-09-14 13:28:57 来源:WEB开发网   
核心提示:运行可以看到效果<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta htt

运行可以看到效果

<!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>

Tags:js 显示 大图

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接