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

更新时间：2008年09月18日 16:44:16 作者：

有时候做一些图片类型的信息，需要这个功能，好多朋友也问我要过类似的代码

<!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需再刷新一下页面才能执行]

您可能感兴趣的文章:

一个已封装好的漂亮进度条
一个已封装好的漂亮进度条...
2007-04-04
一段实现页面上的图片延时加载的js代码
效果可以直接看淘宝的商品分类页、还有QQ的商城页
2010-02-02
纯JS实现的批量图片预览加载功能
需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片
2011-08-08
来自ImageSee官方 JavaScript图片浏览器
2008-01-01
非常不错的javascript 图片慢慢下层效果
非常不错的javascript 图片慢慢下层效果...
2007-08-08
SuperSlide2实现图片滚动特效
SuperSlide2,实现图片滚动，感觉很强大，这里只是简单的演示其中一种类型，想看更多类型的话，可以去http://www.superslide2.com 查看，
2014-06-06
用javascript实现的图片马赛克后显示并切换加文字功能
用javascript实现的图片马赛克后显示并切换加文字功能...
2007-04-04
JavaScript国旗变换效果代码
根据用户选择国家名词，显示对于的国家国旗
2008-08-08
电子商务网站上的常用的js放大镜效果
电子商务网站经常用到简单模仿一下,需要的朋友可以参考下。
2011-12-12
用js 让图片在 div或dl里　居中，底部对齐
2008-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具