分享：用JQuery做的JS图片浏览器

如果有违规请版主直接删除！谢谢！
一、简介
有时我们需要浏览大量图片，如果在一个页面同时下载，页面的加载将很慢。本代码由本人独立开发，同时得到各位朋友的帮助，终于如期完成！你可以随意使用和修改该代码，由于本人并不是专业做WEB或专业写JS代码的，难免有很多地方写得不够好，在这里请各位朋友多多完善，多多指出错误之处，谢谢！
二、功能
1.带缩略图，鼠标悬停于缩略图时，缩略图将变亮，离开时将变暗；当前显示的缩略图比其他缩略图亮。
2.点击缩略图，将显示大图，同时缩略图所在的容器的滚动条将随之而动。
3.鼠标悬停于大图时将显示向左或向右箭头，点击大图时会跳至下一张大图或上一张大图；同时缩略图也会跟着大图的改变而变暗或变亮，缩略图所在的容器的滚动条也将随之而动。
4.自动等比例改变大图的大小，以防撑满整个页面。脚本没有设置参数，如果需要可以自己修改 xsbortsImageBrowser.checkImgLoading这个函数。
4.你可以自定义鼠标文件以及大图未完全下载时显示的等待图片。
5.你可以自定义缩略图及大图的CSS格式。
三、用法
1.设计你自己的图片浏览器样式，这里做了一个简单的：

1.  

2.<table width="600" border="0" align="center" bgcolor="#999999"> 

3.

4.  <tr> 

5.    <th height="110" width="600"   bgcolor="#777777" scope="row" align="center" ><div id="imgSmallDiv" STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#999999" mce_STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#999999" ><div id="imgSmallDivInner" style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999" mce_style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999"></div> 

6.    </div></th> 

7.  </tr> 

8.  <tr > 

9.    <td align="center" id="imgBigTdDesc" ></td> 

10.  </tr> 

11.  <tr > <td align="center" id="imgBigTdX" height=300></td> 

12.  </tr> 

13.</table>

2.定义图片数组，这里是定义大图的数组，可以根据你的需要修改xsbortsImageBrowser.getSmallImgDesc这个函数，现在函数里面是把big替换成small就小图的路径.

1.var imgBigDesc=new Array( 

2.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/90/9059_100815202827.jpg" ], 

3.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/48/4849_100815202827.jpg" ], 

4.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/46/4621_100815202827.jpg" ], 

5.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/06/0608_100815202827.jpg" ], 

6.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/84/8467_100815202827.jpg" ], 

7.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/70/7082_100815202920.jpg" ], 

8.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/07/0700_100815202923.jpg" ], 

9.    ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/12/1207_100815202923.jpg" ] 

10.  );

3.定义其他参数：

1.var urlLoading="http://www.xsborts.com/hbcms/image/loading.gif"; 

2.var urlLeftArrow="url(http://www.xsborts.com/hbcms/image/left.cur),auto"; 

3.var urlRightArrow="url(http://www.xsborts.com/hbcms/image/right.cur),auto";

4.定义一个xsbortsImageBrowser变量,下面是该对象的定义

1.var yourImageBrowser=new  xsbortsImageBrowser( 

2.  arrBigImgDesc,  //1大图url及其描述数组 

3.  idBigImg,           //2显示大图的地方id（td id) 

4.  idDescBigImg,   //3显示大图描述的地方id(td id) 

5.  idOuterDiv,      //4缩略图外面的DIV的id 

6.  idInnerDiv,      //5缩略图里面的DIV的id 

7.  urlLoading,      //6图片载入时显示的loading的图片URL地址 

8.  cssLeftArrow,  //7向左箭头的css样式，类似于{'cursor':'url(http://www.xsborts.com/hbcms/image/left.cur),auto'} 

9.  cssRightArrow  //8向右箭头的css样式       

10.); 

5.初始化页面：

1.

2.var myImageBrowser=new xsbortsImageBrowser(imgBigDesc,"imgBigTdX","imgBigTdDesc","imgSmallDiv","imgSmallDivInner",urlLoading,urlLeftArrow,urlRightArrow); 

3.myImageBrowser.insertSmallImg("myImageBrowser"); 

4.myImageBrowser.imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0,"myImageBrowser");

其中myImageBrowser.insertSmallImg("myImageBrowser"); 这一句中的参数myImageBrowser，正是你定义的xsbortsImageBrowser对象的名字（用字符串符号），下同。
6.为加载的页面的缩略图及大图等加载各种事件函数

1.var myScript=myImageBrowser.createScriptHead();  

2.  myScript+=myImageBrowser.createBigImgClick("myImageBrowser"); 

3.  myScript+=myImageBrowser.createBigImgMouseMove("myImageBrowser"); 

4.  myScript+=myImageBrowser.createBigImgMouseDown("myImageBrowser"); 

5.  myScript+=myImageBrowser.createBigImgMouseUp("myImageBrowser"); 

6.  myScript+=myImageBrowser.createAllSmallImgHover("myImageBrowser"); 

7.  myScript+=myImageBrowser.createScriptTail(); 

8.$(myImageBrowser.jqBigImg).html(myScript); 

7.最重要的是你需要在你自己的页面文件的head部分加载JQuery框架和附件里的脚本文件xsbortsImageBrowser.js

1.<mce:script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" mce_src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></mce:script> 

2.<mce:script src="http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js" mce_src="http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js" type="text/javascript"></mce:script>

演示网址:http://www.xsborts.com/article/04/2081.html
最后附上脚本文件xsbortsImageBrowser.js及示例文件pic4.html.有什么问题请尽管联系我！
下载地址:http://download.csdn.net/source/2629629
或者去我的blog看这两文件的代码http://blog.csdn.net/obestboy/archive/2010/08/18/5820470.aspx