
HTML
首先我们先放四张图片:
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected">
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"
/>
</a>
</div>
</li>
<li>
<div class="tb-pic tb-s40">
<a href="#">
<img src="images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"
/>
</a>
</div>
</li>
</ul> jQuery
接着我们对大图带有样式.jqzoom进行插件调用。当点击缩略图的时候,切换大图的图片。
$(function() {
$(".jqzoom").imagezoom();
$("#thumblist li a").click(function() {
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
$(".jqzoom").attr('src', $(this).find("img").attr("mid"));
$(".jqzoom").attr('rel', $(this).find("img").attr("big"));
});
}); *
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
