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>