js相册展示

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/7ED74130F8227