求一个点击小图显示大图的函数

其实你点击的就是一个小图，给这个小图加个链接<a href=""><img src=""></a>
当点击这个连接（链接后面跟着参数，标识图片用），然后根据这个标识显示大图片就行了

不会吧 ~~~要固定的img标签打开啊

<div class="gallery">
     <div class="booth pic s310">
<a href="http://www.taobao.com/view_image.php?pic=Wx0GGlFDXA1VUwMBWx0SCwkNGRFcVxxQW1UcCxMFRBkDCFdVV1cRRhpXRDhHFApJfmtsbkkxKggMNEFTAGsCAkVdR1xFBgYV&title=x%2B%2FXsMjIwvQguqu5%2BkhPUEUgV0FZyrHJ0MTQyr%2FQ3snt0N3P0LOk0OSzxMnAIMvEyasgMzAzMQ%3D%3D&version=2&c=OTY4ZGJlYzc0OTM1MjUxNGY5NjdkOGI1MDIxNzVkMDQ%3D&itemId=9fe87ecfffaee2844c8a12faa263d51a&shopId=33848946&sellerRate=42279&dbId=db2&fv=9"  target="_blank">
<img id="J_ImgBooth" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1f2pLXXVzXXbgX278_100448.jpg_310x310.jpg"  data-hasZoom="700" />
</a>
<div class="zoom-icon hidden"   id="J_zoomIcon"></div>
</div> <ul id="J_UlThumb" class="thumb clearfix">
<li class="selected">
<div class="pic s40">
<a href="#"><img src="http://img03.taobaocdn.com/imgextra/i3/T1f2pLXXVzXXbgX278_100448.jpg_40x40.jpg" /></a>
</div>
</li>
<li >
<div class="pic s40">
<a href="#"><img src="http://img04.taobaocdn.com/imgextra/i8/T1GwxyXfNCXXbWJ3LX_085310.jpg_40x40.jpg" /></a> </div>
</li>
</ul>沒認真看，就扣這個出來了。

使用jquery可以很方便的切换图片，可以使用hover函数

你也可以设为从数据库里面读的如：<script language="JavaScript" type="text/JavaScript">
var imgObj;
function checkImg(theURL,winName){
  if (typeof(imgObj) == "object"){
    if ((imgObj.width != 0) && (imgObj.height != 0))
{
      OpenFullSizeWindow(theURL,winName, "width=" + (imgObj.width) + ",height=" + (imgObj.height));
   //alert(OpenFullSizeWindow);
}
    else
      setTimeout("checkImg('" + theURL + "','" + winName + "')", 100);
  }
}

function OpenFullSizeWindow(theURL,winName,features) {
  var aNewWin, sBaseCmd;

  sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";

  if (features == null || features == ""){

    imgObj = new Image();

    imgObj.src = theURL;

    checkImg(theURL, winName)
  }
  else{

    aNewWin = window.open(theURL,winName, sBaseCmd + features);

    aNewWin.focus();
  }
}
</script><a href="<%=rs("imgurl")%>" onclick="OpenFullSizeWindow(this.href,'','');return false;"><img src="<%=rs("imgurl")%>"/></a>差不多这样子可能有点出入。

没有我需要的是有两种img标签，一个大的，很多个小的，当鼠标放到小的img标签上或者点击的时候，大的会更换。

我信道“channel01”已注册，不能提问咋弄

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">img.thumb_img {
cursor:pointer;
margin-right:10px;
width:75px;
height:60px;
}
img#main_img {
cursor:pointer;
display:block;
width:500px;
height:375px;
}
</style>
<title>切换图片</title>
</head><body>
<div style="width:500px;">
<img id="main_img" src="upfile/Avalon/Bar Chair/l20101015041658.jpg" alt="bay" rel="upfile/Avalon/Bar Chair/s20101015041658.jpg" link="index.html" /><br/>
<img class="thumb_img" src="upfile/Avalon/Bar Chair/s20101015041658.jpg" rel="upfile/Avalon/Bar Chair/l20101015041658.jpg" alt="bay1" link="1.html" onmousemove="change()" /><img class="thumb_img" src="upfile/Avalon/Bar Chair/s20101015041706.jpg" rel="upfile/Avalon/Bar Chair/l20101015041706.jpg" alt="bay1" link="1.html" onmousemove="change()" />
</div>
<script type="text/javascript" language="javascript">
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
}
function change(){
var thumbs = document.getElementsByClassName('thumb_img');
for (var i=0; i<thumbs.length; i++) {
    thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};
    thumbs[i].onclick = function () {location = this.link}
}
$('main_img').onclick = function () {location = this.link;}}
</script>
</body>
</html>我自己弄的一个但是只有IE起作用
我的images文件夹里面有小图和大图，都要用到，网上找到一个只用到了大图，谁能帮忙修改一下么？把上面那个修改为能兼容主流浏览器的，或者把下面一个修改为能同时用到大图和小图的。<!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] = "upfile/Avalon/Bar Chair/l20101015041658.jpg";
            img[1] = "upfile/Avalon/Bar Chair/l20101015041706.jpg";
            function $(obj){
                return document.getElementById(obj);
            }
            function $img(url){
                return "<img src='" + url + "' onmouseover='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>

调试易

求一个点击小图显示大图的函数

解决方案 »