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>
