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")); 
    }); 
});