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='width: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="width:30px;"><button class="prevBtn" onclick="PreviousNext(-1)"><<</button></td>
         <td align="center" valign="middle">
             <div style="width:630px;height:660px;border:1px solid gray;">
                 <table style="text-align:center;width:100%;height:100%;">
                     <tr>
                         <td style="text-align:center;vertical-align:middle;">
                             <img id="big_photo" style="display:inlie-block;max-width: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="width:30px;"><button class="nextBtn" onclick="PreviousNext(1)">>></button></td>
     </tr>
     <tr>
         <td style="width:30px;"><button class="prevBtn" onclick="PreviousNext(-1)"><<</button></td>
         <td>
             <ul id="navlist" currentimg="0" style="list-style:none;display:block;overflow:hidden;width:605px;height:65px;padding:5px;white-space:nowrap;">
                 <li style="display:inline-block;"><img onclick="NavImgClick(this,0)" imgIndex=0 style="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width: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="width:30px;"><button class="nextBtn" onclick="PreviousNext(1)">>></button></td>
     </tr>
 </table>