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

长长的路常常走走 2010-08-18 05:18:05
加精
如果有违规请版主直接删除！谢谢！
一、简介
有时我们需要浏览大量图片，如果在一个页面同时下载，页面的加载将很慢。本代码由本人独立开发，同时得到各位朋友的帮助，终于如期完成！你可以随意使用和修改该代码，由于本人并不是专业做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
...全文
6062 153 打赏 收藏 转发到动态 举报
写回复
用AI写文章
153 条回复
切换为时间正序
请发表友善的回复…
发表回复
lingweiron 2011-09-15
  • 打赏
  • 举报
 回复
顶一下。好东西。
wwwiii520 2010-11-11
  • 打赏
  • 举报
 回复
IE6下有问题耶
长长的路常常走走 2010-09-14
  • 打赏
  • 举报
 回复
今天又做了重大更新

第一：
凡是图片缩小显示的，都会显示一个浏览大图的按钮
点击该按钮就会显示适合于你屏幕的大图

第二：
以前总有人说看图慢
现在第一张图片下载完后，会一下下载所有图片
这样就不会有慢的感觉了

另外在这里征求一个下载方案，不希望一下全部下载下来
比如看的人浏览了第一张，那么就把后面５张也下载下来（一屏显示6张小图）
读者浏览了第二张，那么就下载2-7张
如果浏览者2-7张都不想看，他想看第10张，那看第10张的时候，就下载10-15张，

显然，你已经看出，这也不是最优的下载方案
看看，你能想到最优下载方案吗？
你能“预见”到读者会看哪些图片吗？
vblueskyq1 2010-09-10
  • 打赏
  • 举报
 回复
学习下~~
长长的路常常走走 2010-09-05
  • 打赏
  • 举报
 回复
今天做了更新，原来挤在一起的缩略图把分隔开了，好看多了
不再使用hover函数，但为了兼容，该函数实际是空的
原来显示的大图规格改成显示600x450，改善了浏览体验。
IE下滚动条重新设置了颜色，FF下没法实现，期望以后有更多时间自定义一个滚动条。
wanghailong0115 2010-09-03
  • 打赏
  • 举报
 回复
学习学习
菠萝先生 2010-09-03
  • 打赏
  • 举报
 回复
每天回帖即可获得10分可用分！小技巧：教您如何更快获得可用分
yinglangziwsp 2010-09-03
  • 打赏
  • 举报
 回复
不错，绝对的顶
zhejiang_HDU 2010-09-02
  • 打赏
  • 举报
 回复
支持原创！！！顶！！
wangym1985 2010-09-02
  • 打赏
  • 举报
 回复
zhf
KK3K2005 2010-09-02
  • 打赏
  • 举报
 回复
至少把 滚动条 换成其他的吧
caizhenyu888 2010-09-02
  • 打赏
  • 举报
 回复
有没在线视频
xingjibing 2010-09-02
  • 打赏
  • 举报
 回复
学习中
hsrdy 2010-09-02
  • 打赏
  • 举报
 回复
感谢分享！
qijiayuan 2010-09-02
  • 打赏
  • 举报
 回复
thank you!!!
rcx100 2010-09-02
  • 打赏
  • 举报
 回复
好东西学习了！
fhqzsw 2010-09-01
  • 打赏
  • 举报
 回复
好东西啊。
CGQXYC 2010-09-01
  • 打赏
  • 举报
 回复
很好 支持一下
SongQues 2010-09-01
  • 打赏
  • 举报
 回复
做的不错！呵呵顶楼主！
yangquanlaohou 2010-09-01
  • 打赏
  • 举报
 回复
不错，学习学习
加载更多回复（119）
ScanPhotos-X:JavaScript image gallery js图片浏览器 jquery图片浏览器 前端图片浏览器 图片浏览器
ScanPhotos-X X图片浏览器 JavaScript image gallery for mobile and desktop. Features 特点 ###1:自动扫描加载图片 支持网页上图片的自动扫描加载，支持body内所有图片或者指定区域内所有图片的自动扫描加载。 $.fn.Photos({ target: "body" //".class" "#id" }); ###2:完善的图片操作功能 支持对图片的操作处理包括鼠标滚轮放大缩小，图片旋转，图片的鼠标拖拽移动，图片下载，图片切换，全屏展示等功能 ###3:动态实时监控图片状态 当指定区域内图片发生添加或删除时可动态更新 ###4:多实例支持 在一个网页实现多个图片浏览器实例，图片浏览器之间互不干扰 #Dependence依赖 jQuery v
Jquery-JS图片上传预览(无浏览器限制)
Jquery-JS图片上传预览 无浏览器限制（已测试：火狐，谷歌。IE都可以）
JQuery快速入门教程
课程目标什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库 浏览器兼容比较好 jQuery可以简化JavaScript代码适用人群Java初级开发人员，JavaScript初学者，web前端开发人员课程简介课程目标：学习jQuery 可以实现Web系统的后台前端界面开发以及企业级项目前端界面开发。适合对象：适合希望能够快速开发Web系统后台前端界面或企业级开发前端界面学习收益：jQuery 技术概念jQuery选择器的使用jQuery链式语法使用jQuery 代码优化设计jQuery动画
jQuery scrollGallery 图片浏览器（支持左右滚动控制）
jQuery scrollGallery 图片浏览器（支持左右滚动控制）!值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
javascript经典特效---jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换).rar
jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换).rar
JavaScript

87,914

社区成员

224,620

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章