Question

求一段js或Jquery代码。效果如下面所说，至于网页布局就不要辛苦您写了，只要脚本代码和点击事件。

网页左侧有二排缩略图（大概六个的样子），点击任意一个缩略图，缩略图的大图到网页中央。点击另一个缩略图，缩略图的大图到网页中央。且第一次点击的缩略图不会消失，和第二次点击的缩略图共存（同样可以点击其他缩略图，大图显示并共存，并且可以再次点击以点击过的缩略图）。第一、二、三……次的显示的大图共存后，我点击哪张大图，大图就在最上面显示。
我自己已经完成的部分：缩略图点击就在指点层显示已经做好了。但是无法实现点击的缩略图的大图实现共存。只能显示一张大图。我是个新手，求大神灌顶。

Answer 1

每个小图对应一个大图的层，点了才显示。并且图片的样式属性：position设置absolute ；点击哪张大图，大图就在最上面显示：在点击事件中更改图片的z-index属性值大于其它图片的z-index属性值；希望能帮助到你！

追问

兄弟，说和写，那就大不同了。

Answer 2

其实是说你的大图的那个层应该有6个 和左边的那个小图对应好 开始时显示一个 隐藏5个 这6个层按z-index做个排序， 显示在最上面的加个id 点小图时 对应的大图层加上这个id 修改z-index就行了

追问

我要的是动态生成大图，因为我不可能为每个缩略图写一个对应的大图。无论是缩略图还是大图片，都是从数据库加载。

追答

对哇 你用的是什么语言的 不能循环输出吗？ 只是改了你的z-index 属性 其他的什么也没变哇

Answer 3

6个缩略图对应6个不同的层，6个层对应6个大图
<ul class="xiao">
<li>小图1</li><li>小图2</li><li>小图3</li>
<li>小图4</li><li>小图5</li><li>小图6</li>
<ul>
<div id="box">
<div class="da">大图1</div><div class="da">大图2</div><div class="da">大图3</div><div class="da">大图4</div><div class="da">大图5</div><div class="da">大图6</div>
</div>
$(".xiao li").click(function(){
$("#box .da").eq($(".xiao li").index(this)).show();
});
大图显示在中间，还要共存，明显用了定位，用了定位就会有个层级，如果点击大图时，这张大图所在层的层级比其他几个层的层级高，就会显示在最上面。
$("#box .da").click(function(){
$(this).addClass("zdex").siblings(".da").removeClass("zdex");
});
.da{z-index:999;}.zdex{z-index:99999;}

追问

真这么简单？按照您的说法一个缩略图对应一个层，问题是我的图片是从数据库读取的。也许现在只有6个缩略图。那么，以后就未必了。难道每次添加了图片都要手动修改前台的代码？我希望得到的代码有可用性。点击一个缩略图，大图就出现在网页中。现在所有缩略图已经固定在一个层里面，而大图没有固定位置。我现在就想实现点击缩略图后多张大图共存。不能把大图写死了。我这里有许多图层。

追答

我不懂数据库，但跟后台人员配合多了，我也知道有种方法叫循环加载（他们是这么跟我说的），这可能就是评论里的那位仁兄说的动态加载吧。只要加载出来的大图的顺序跟说略图的顺序对应的上的话，我写的JQ代码就可以满足要求。

追问

好吧。先不管循环生成大图方面，我需要的是点击缩略图，马上生成大图。也就是说写代码的时候没有固定几个大图的div。因为一个小缩略图可以点击多次，从而生成多个大图，可能是同样的大图，但它们不在同一个div。我现在只负责写前台的代码，至于以后从数据库的动态加载图片URL我不管。现在图片就固定六个，缩略图由原图生成。至于大图嘛，每点击一次小图就生成一个大图。六个小图可以通过N次点击生成N个大图。感谢您的回答

追答

哦 是我理解错了，没关系修改修改就行，通过复制实现N次点击显示N张大图，
跟上面一样初始6张大图都是隐藏的.da{display:none;}
$(".xiao li").click(function(){
$("#box .da").eq($(".xiao li").index(this)).clone().appendTo("#box").show();
});
clone()克隆；appendTo("#box")插入到id=“box”的div中，出现在已有元素的后面，不会影响已有元素的显示，

追问

非常谢谢您的回答。这样做克隆的大图片会和小图片class=""一样么？我希望大图片有自己的class，主要是我为所有的大图片写了一些功能。我自己写的一段代码，代码如下：
$(".but").live("click",function() //把点击事件绑定到class=but的标签上面，but为所有小图片的class
{
$("#test").append('');
//添加一个img标签。问题是每次点击小图的时候，怎么把src传/给大图片
});