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