js相冊展示

自己寫來用的，第一版草稿源碼+效果圖，功能優先，其他的再說，有時間再改進。

1 <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
  2 
  3 <script type="text/javascript">
  4     
  5     //only show 9 img on the list
  6     var imgTotal=8;
  7 
  8     //when click the img list show the selected img
  9     function NavImgClick(obj)
 10     {
 11         $("#navlist li:visible img").each(function(){
 12             if($(this).parent().is("div"))
 13                 $(this).unwrap();
 14         });
 15         var img=$(obj).attr("src");
 16         $("#big_photo").attr("src",img);
 17         $(obj).wrap("<div style='width:61px;height:61px;border:2px solid #C6C6C6;'></div>");
 18 
 19         //set the current index
 20         $("#navlist").attr("currentimg",$(obj).attr("imgIndex"));
 21 
 22     }
 23 
 24     function PreviousNext(dir)
 25     {
 26         //left 9 img list on the page, other hidden        
 27         var currentImg=$("#navlist li:visible img[imgIndex="+($("#navlist").attr("currentimg")||0)+"]");
 28         var currentImgIndex=parseInt(currentImg.attr("imgIndex"));
 29         var firstImgIndex=parseInt($("#navlist li:visible img").eq(0).attr("imgIndex"));
 30         //judge if the first or the last img in the list
 31         var imgCount=currentImgIndex-firstImgIndex;
 32 
 33         //dir 1 and -1
 34         if(dir==1)
 35         {
 36             //dir 1 next one
 37             if(currentImg.parent().is("div"))
 38             {                
 39                 if(currentImg.parent().parent().next().length>0)
 40                 {
 41                     if(imgCount==imgTotal)
 42                     {
 43                         $("#navlist li:visible").first().hide();
 44                         $(".prevBtn").removeAttr("disabled");
 45                     }
 46                     $(".nextBtn").removeAttr("disabled");
 47                     NavImgClick($("#navlist li:visible img[imgIndex="+(currentImgIndex+1)+"]"));
 48                 }
 49                 else
 50                 {
 51                     //disable the next button
 52                     $(".nextBtn").attr("disabled",true);
 53                 }
 54             }
 55         }
 56         else
 57         {
 58             //dir -1 previous one
 59             if(currentImg.parent().is("div"))
 60             {
 61                 if(currentImg.parent().parent().prev().length>0)
 62                 {
 63                     if(imgCount==0)
 64                     {
 65                         $("#navlist li:hidden").last().show();
 66                         $(".nextBtn").removeAttr("disabled");
 67                     }
 68                     $(".prevBtn").removeAttr("disabled");
 69                     NavImgClick($("#navlist li:visible img[imgIndex="+(currentImgIndex-1)+"]"));
 70                 }
 71                 else
 72                 {
 73                     $(".prevBtn").attr("disabled",true);
 74                 }
 75             }
 76         }
 77     }
 78     
 79     //onload init the first img
 80     $(function(){
 81         NavImgClick($("#navlist li img").eq(0));
 82     });
 83 
 84 </script>
 85 
 86 
 87 
 88 <table style="">
 89     <tr>
 90         <td style="width:30px;"><button class="prevBtn" onclick="PreviousNext(-1)"><<</button></td>
 91         <td align="center" valign="middle">
 92             <div style="width:630px;height:660px;border:1px solid gray;">
 93                 <table style="text-align:center;width:100%;height:100%;">
 94                     <tr>
 95                         <td style="text-align:center;vertical-align:middle;">
 96                             <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"/>
 97                         </td>
 98                     </tr>
 99                 </table>                
100             </div>
101         </td>
102         <td style="width:30px;"><button class="nextBtn" onclick="PreviousNext(1)">>></button></td>
103     </tr>
104     <tr>
105         <td style="width:30px;"><button class="prevBtn" onclick="PreviousNext(-1)"><<</button></td>
106         <td>            
107             <ul id="navlist" currentimg="0" style="list-style:none;display:block;overflow:hidden;width:605px;height:65px;padding:5px;white-space:nowrap;">
108                 <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>
109                 <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>
110                 <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>
111                 <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>
112                 <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>
113                 <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>
114                 <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>
115                 <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>
116                 <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>
117                 <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>
118                 <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>
119                 <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>
120                 <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>                
121             </ul>
122         </td>
123         <td style="width:30px;"><button class="nextBtn" onclick="PreviousNext(1)">>></button></td>
124     </tr>
125 </table>