JS动态横向图片浏览框

//前提是必须有很多图片,目前我是12张，编号顺序必须为 ip1.jpg,p2.jpg,p3.jpg,p4.jpg

<script type="text/javascript">
var middlePath;
//目前是有12张图片，呵呵，以后有增加这个值需要更改
var imageLength=12;
function ToRight()
{
//获取目前选中的图片编号，就是最中间的那个，也是在image3上显示的那一个,把他的值传给上面的middlePath
GetmiddlePath();
//不显示图片的个数，因为有时候会到边界，一般边界的图片不显示！因为它提交没有图片了！
var noImageCount = 0;
//判断距离， 总共的图片数 - 当前选中的图片编号
var space = parseInt(imageLength) -parseInt(middlePath);
//因为一种有5张图显示出来，那么等于2的时候，就是刚好到边缘的时候！
if( space == 2)
{
//所以只有1个不会显示图片，就是最后一个
noImageCount =1;
}
else if( space == 1)
{
noImageCount = 2;
}
else if( space == 0)
{
alert("已经到最后一张了");
return;
}
var controlImage1 = document.getElementById("img1");
var controlImage2= document.getElementById("img2");
var controlImage3= document.getElementById("img3");
var controlImage4= document.getElementById("img4");
var controlImage5= document.getElementById("img5");
//根据图片的编号拼接出该图片的路径，前提是图片必须是有规律的，顺序不能捣乱！
var begionPath = "IpImageMode/ip";
var endPath = ".jpg";
//如果当前选中的图片编号为1，那么证明了目前左边有2张图片不能显示，那么他点击完以后，所以还有1张不能显示，当然是最边上的一个了，
//就是controlImage1
if(middlePath == 1)
{
var AllPath ="IpImageMode/noImage.jpg";
controlImage1.src=AllPath;
}
else
{
//更换图片，往右走图片编号当然是会+1咯，不过前提是图片都有规律，顺序不能捣乱，这就证明了该程序的可修改性相当差！修改的提前要求颇高！
//，不能做到随心所欲，想改就该。增加的话到没有问题！如果要修改一张图片，切不能更改其名字，只能替换，就算替换的话，模板的数据，坐标等都要
//换，也是一件很麻烦的事情了！
var image1MiddlePath = parseInt(middlePath) -1;
var AllPath = begionPath + image1MiddlePath + endPath;
controlImage1.src=AllPath;
}

middlePath= parseInt(middlePath);
AllPath = begionPath + middlePath + endPath;
controlImage2.src=AllPath;

middlePath= parseInt(middlePath) + 1;
AllPath = begionPath + middlePath + endPath;
controlImage3.src=AllPath;

//如果有2张图片不能显示的话，现在是往右点的，当然倒数第二张，也就是image4，只有他和image5不能显示
if(noImageCount==2)
{
AllPath ="IpImageMode/noImage.jpg";
controlImage4.src = AllPath;
}
else
{
middlePath= parseInt(middlePath) + 1;
AllPath = begionPath + middlePath + endPath;
controlImage4.src=AllPath;
}
//不管是2张还是1张不能显示，那么作为最边上的位置 image5，都不能显示了！
if(noImageCount==2 || noImageCount==1)
{
AllPath ="IpImageMode/noImage.jpg";
controlImage5.src = AllPath;
}
else
{
middlePath= parseInt(middlePath) + 1;
AllPath = begionPath + middlePath + endPath;
controlImage5.src=AllPath;
}

}

function GetmiddlePath()
{
var controlImage3 = document.getElementById("img3");
var src = controlImage3.src;
//用正则获取图像号码
middlePath =/-?[0-9]+?.jpg/.exec(src);
middlePath = /-?[0-9]{1,}/.exec(middlePath);

}

//类似ToRight（）就不多写注释了，只是逻辑稍微有点不同而已！
function ToLeft()
{

var controlImage3 = document.getElementById("img3");
var src = controlImage3.src;
//用正则获取图像号码
middlePath =/[0-9]+?.jpg/.exec(src);
middlePath = /[0-9]{1,}/.exec(middlePath);

//没有图画的个数
var noImageCount ="0";
if(middlePath ==3)
{
noImageCount =1;
}
else if(middlePath ==2)
{
noImageCount =2;
}
else if(middlePath ==1)
{
alert("已经是第一张了");
return;
}

var controlImage1 = document.getElementById("img1");
var controlImage2= document.getElementById("img2");
var controlImage3= document.getElementById("img3");
var controlImage4= document.getElementById("img4");
var controlImage5= document.getElementById("img5");
//拼接路径
var begionPath = "IpImageMode/ip";
var endPath = ".jpg";
//如果是往左边走的话，那么当你选中的是最右边的那张的时候，最左边那张也是没有图片的，因为他们之间有相差2个位置，一次只有显示
//1张
if(middlePath == imageLength)
{
controlImage5.src="IpImageMode/noImage.jpg";
}
else
{
var image5MiddlePath = parseInt(middlePath) + 1 ;
var AllPath = begionPath + image5MiddlePath + endPath;
controlImage5.src=AllPath;
}
middlePath= parseInt(middlePath);
AllPath = begionPath + middlePath + endPath;
controlImage4.src=AllPath;

middlePath= parseInt(middlePath) - 1;
AllPath = begionPath + middlePath + endPath;
controlImage3.src=AllPath;
if(noImageCount==2)
{
AllPath ="IpImageMode/noImage.jpg";
controlImage2.src = AllPath;
}
else
{
middlePath= parseInt(middlePath) - 1;
AllPath = begionPath + middlePath + endPath;
controlImage2.src=AllPath;
}

if(noImageCount ==1 || noImageCount==2)
{
AllPath ="IpImageMode/noImage.jpg";
controlImage1.src=AllPath;
}
else
{
middlePath= parseInt(middlePath) - 1;
AllPath = begionPath + middlePath + endPath;
controlImage1.src=AllPath;
}
}
</script>

<table>
<tr>
<td>
<img src="IpImageMode/left.jpg" style="height: 90px; width: 90px" onclick="ToLeft()" />
</td>
<td>
<img id="img1" src="IpImageMode/ip1.jpg" style="height: 90px; width: 90px" />
</td>
<td>
<img id="img2" src="IpImageMode/ip2.jpg" style="height: 90px; width: 90px" />
</td>
<td>
<img id="img3" src="IpImageMode/ip3.jpg" style="height: 150px; width: 150px" />
</td>
<td>
<img id="img4" src="IpImageMode/ip4.jpg" style="height: 90px; width: 90px" />
</td>
<td>
<img id="img5" src="IpImageMode/ip5.jpg" style="height: 90px; width: 90px" />
</td>
<td>
<img src="IpImageMode/right.jpg" style="height: 90px; width: 90px" onclick="ToRight()" />
</td>
</tr>
</table>