js相册展示

自己写来用的，第一版草稿源码+效果图，功能优先，其他的再说，有时间再改进。

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    
    //only show 9 img on the list
    var imgTotal=8;

    //when click the img list show the selected img
    function NavImgClick(obj)
    {
        $("#navlist li:visible img").each(function(){
            if($(this).parent().is("div"))
                $(this).unwrap();
        });
        var img=$(obj).attr("src");
        $("#big_photo").attr("src",img);
        $(obj).wrap("<div style='61px;height:61px;border:2px solid #C6C6C6;'></div>");

        //set the current index
        $("#navlist").attr("currentimg",$(obj).attr("imgIndex"));

    }

    function PreviousNext(dir)
    {
        //left 9 img list on the page, other hidden        
        var currentImg=$("#navlist li:visible img[imgIndex="+($("#navlist").attr("currentimg")||0)+"]");
        var currentImgIndex=parseInt(currentImg.attr("imgIndex"));
        var firstImgIndex=parseInt($("#navlist li:visible img").eq(0).attr("imgIndex"));
        //judge if the first or the last img in the list
        var imgCount=currentImgIndex-firstImgIndex;

        //dir 1 and -1
        if(dir==1)
        {
            //dir 1 next one
            if(currentImg.parent().is("div"))
            {                
                if(currentImg.parent().parent().next().length>0)
                {
                    if(imgCount==imgTotal)
                    {
                        $("#navlist li:visible").first().hide();
                        $(".prevBtn").removeAttr("disabled");
                    }
                    $(".nextBtn").removeAttr("disabled");
                    NavImgClick($("#navlist li:visible img[imgIndex="+(currentImgIndex+1)+"]"));
                }
                else
                {
                    //disable the next button
                    $(".nextBtn").attr("disabled",true);
                }
            }
        }
        else
        {
            //dir -1 previous one
            if(currentImg.parent().is("div"))
            {
                if(currentImg.parent().parent().prev().length>0)
                {
                    if(imgCount==0)
                    {
                        $("#navlist li:hidden").last().show();
                        $(".nextBtn").removeAttr("disabled");
                    }
                    $(".prevBtn").removeAttr("disabled");
                    NavImgClick($("#navlist li:visible img[imgIndex="+(currentImgIndex-1)+"]"));
                }
                else
                {
                    $(".prevBtn").attr("disabled",true);
                }
            }
        }
    }
    
    //onload init the first img
    $(function(){
        NavImgClick($("#navlist li img").eq(0));
    });

</script>



<table style="">
    <tr>
        <td style="30px;"><button class="prevBtn" onclick="PreviousNext(-1)"><<</button></td>
        <td align="center" valign="middle">
            <div style="630px;height:660px;border:1px solid gray;">
                <table style="text-align:center;100%;height:100%;">
                    <tr>
                        <td style="text-align:center;vertical-align:middle;">
                            <img id="big_photo" style="display:inlie-block;max-620px;max-height:650px;" src="http://m2.img.srcdd.com/farm4/d/2013/0907/09/1A55F2AC89AE00EBC4973D36FA62749E_B1280_1280_waef6_500_666.JPEG"/>
                        </td>
                    </tr>
                </table>                
            </div>
        </td>
        <td style="30px;"><button class="nextBtn" onclick="PreviousNext(1)">>></button></td>
    </tr>
    <tr>
        <td style="30px;"><button class="prevBtn" onclick="PreviousNext(-1)"><<</button></td>
        <td>            
            <ul id="navlist" currentimg="0" style="list-style:none;display:block;overflow:hidden;605px;height:65px;padding:5px;white-space:nowrap;">
                <li style="display:inline-block;"><img onclick="NavImgClick(this,0)" imgIndex=0 style="60px;height:60px;" src="http://m3.img.srcdd.com/farm4/d/2013/0218/17/361180C17EB5486F928E3BCF6155D847_B1280_1280_waef6_500_666.JPEG"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,1)" imgIndex=1 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm4/d/2013/0907/09/1A55F2AC89AE00EBC4973D36FA62749E_B1280_1280_waef6_500_666.JPEG"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,2)" imgIndex=2 style="60px;height:60px;" src="http://m3.img.srcdd.com/farm5/d/2013/1111/11/ABD8A40775BD2C2A8F69D2F389556C0A_B1280_1280_wb771_757_600.jpeg"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,3)" imgIndex=3 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm4/d/2014/0805/21/1B966394AAC8AA67A78C930A96072B33_B1280_1280_450_600.jpeg"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,4)" imgIndex=4 style="60px;height:60px;" src="http://m3.img.srcdd.com/farm5/d/2014/0805/21/810A43130E01113A1C70968845D80DF9_B1280_1280_450_600.jpeg"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,5)" imgIndex=5 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm5/d/2014/0805/21/42E06319A08491791C77E3A67E597DD4_B500_900_500_703.jpeg"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,6)" imgIndex=6 style="60px;height:60px;" src="http://m3.img.srcdd.com/farm5/d/2014/0805/18/142990BECE7E22BBF6F228389F931AAA_B800_2400_565_1000.jpeg"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,7)" imgIndex=7 style="60px;height:60px;" src="http://m3.img.srcdd.com/farm4/d/2014/0805/18/192B2AF73BF777C4F76755EA600DE764_B1280_1280_500_750.jpeg"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,8)" imgIndex=8 style="60px;height:60px;" src="http://m3.img.srcdd.com/farm4/d/2013/0218/17/361180C17EB5486F928E3BCF6155D847_B1280_1280_waef6_500_666.JPEG"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,9)" imgIndex=9 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm4/d/2013/0907/09/7ED74130F8227451CB69A6837A27138D_B500_900_waef6_500_750.JPEG"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,10)" imgIndex=10 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm4/d/2013/0907/09/7ED74130F8227451CB69A6837A27138D_B500_900_waef6_500_750.JPEG"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,11)" imgIndex=11 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm4/d/2013/0907/09/7ED74130F8227451CB69A6837A27138D_B500_900_waef6_500_750.JPEG"></li>
                <li style="display:inline-block;"><img onclick="NavImgClick(this,12)" imgIndex=12 style="60px;height:60px;" src="http://m2.img.srcdd.com/farm4/d/2013/0907/09/7ED74130F8227451CB69A6837A27138D_B500_900_waef6_500_750.JPEG"></li>                
            </ul>
        </td>
        <td style="30px;"><button class="nextBtn" onclick="PreviousNext(1)">>></button></td>
    </tr>
</table>