当前位置：首页 → 问答吧 → 【分享】简单实用的JQ相册

【分享】简单实用的JQ相册

时间：2010-05-27

来源：互联网

老样子，点运行后还要再刷新一遍JQ才能引入

小弟最近接公司要求，做个图库，由于要求图片要平滑浏览及动画效果，在时间及空间的双重压迫下(我也不知道空间是啥玩意)

，小弟放弃了以前写原生JS代码的习惯，研究了下JQ，下面就先呈上小弟的作品

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://images.lafaso.com/css/site_v4.css" rel="stylesheet" type="text/css" /> <link href="http://images.lafaso.com/css/tswp_sec.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="photobg mauto"> <script src="http://www.lafaso.com/js/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript"> /*power by qiuxiaoqiang 2010.05.27*/ jQuery.fn.loadthumb = function(options){ options = $.extend({ src : "" },options); var _self = this; _self.hide(); var img = new Image(); $(img).load(function(){ _self.attr("src", options.src); _self.fadeIn("slow"); }).attr("src", options.src); return _self; } $(document).ready(function(){ var iNum = $("#smallpic img"); var site = 0; var childW = 135; iNum.click(function(){ var chanurl = this.src.replace("s.jpg","b.jpg"); $('#imge').loadthumb({src:chanurl}); iNum.removeClass();$(this).addClass("on") }) $('#controlpre').bind('click',function(){donextpic.contpre()}); $('#controlnext').bind('click',function(){donextpic.contnext()}); $("#next").bind("click",function(){donextpic.turnRight()}); $("#pre").bind("click",function(){donextpic.turnLeft()}); donextpic = { turnRight:function(){ var p = $("#imge").attr("src"); var inc = p.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } len++; if(len != iNum.length+1) { $("#phototit").fadeOut() $('#imge').loadthumb({src:inc[0]+ "_" + len + "b.jpg"}); $('#smallpic li').each(function(){ if($(this).find("img").attr("src") == inc[0]+ "_" + len + "s.jpg" ) { iNum.removeClass(); $(this).find("img").addClass("on"); var sst = Math.abs(site) var count; if(site == 0) { count = len } else(count = len-sst) if(count>5){donextpic.contnext()} } }) } else { $("#phototit").fadeIn("slow") return false; } }, contnext:function(){ if(site != -(iNum.length-5)) { site-=1 $('#smallpic').animate({ 'marginLeft' : childW*(site) }) }else{return false} }, contpre:function(){ if(site != 0) { site+=1 $('#smallpic').animate({ 'marginLeft' : childW*(site) }) }else{return false} }, turnLeft:function(){ var p = $("#imge").attr("src"); var inc = p.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } len--; if(len != 0) { $("#phototit").fadeOut() $('#imge').loadthumb({src:inc[0]+ "_" + len + "b.jpg"}); $('#smallpic li').each(function(){ if($(this).find("img").attr("src") == inc[0]+ "_" + len + "s.jpg" ) { iNum.removeClass(); $(this).find("img").addClass("on"); var sst = Math.abs(site) var count; if(site == 0) { count = len } else(count = len-sst) if(count<1){donextpic.contpre()} } }) } else { return false; } } } $("#photoclose").bind("click",function(){$("#phototit").fadeOut()}) }); </script> <div class="w950 bgwhite mauto"> <div class="pa10"> <div class="photodisboxL"> <div class="photobox"> <p class="photoboxletter"> 名称名称名称 </p> <div class="photoboxcont clear"> <div class="photoinbox clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic13.jpg" class="fl" /> <div class="fl photoboxcontin clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic16.jpg" class="fl ma07 cur" id="pre" /> <div class="fl photoboxcontpic ofh pos01"> <div class="phototitle" id="phototit"> <p class="phototitletop"> <em class="fl pt5">您已经浏览完所有图片</em> <img src="http://images.lafaso.com/images/zt/tswp/tswp_new37.jpg" id="photoclose" class="fr" /> </p> <p class="clear h30 pt10"> <a href="#" class="fl ml12">播放上一图集</a> <a href="#" class="fr mr12">播放下一图集</a> </p> </div> <p class="photoboxcontpicbox"> <img id="imge" src="http://images.lafaso.com/images/test/ss_1b.jpg" /> </p> <p class="pa01">组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述组图描述 </p> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic17.jpg" class="fl ma07 cur" id="next" /> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic14.jpg" class="fl" /> </div> <div class="photosmallbox clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic19.jpg" id="controlpre" class="fl mt43 cur" /> <div class="fl photosmallboxin ofh"> <div style="float:left; width:6000px;" id="smallpic"> <ul> <li><img src="http://images.lafaso.com/images/test/ss_1s.jpg" class="on" /></li> <li><img src="http://images.lafaso.com/images/test/ss_2s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_3s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_4s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_5s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_6s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_7s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_8s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_9s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_10s.jpg" /></li> </ul> </div> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic20.jpg" id="controlnext" class="fl mt43 cur" /> </div> </div> <p class="photoboxbottom clear ofh"></p> </div> </div> <p class="clear"></p> </div> <p class="clear"></p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这个对编辑的要求就是传图片的时候，必须以下划线为基准，比如:http://www.xxx.com/xxx/xxx/xxxx_1s.jpg，这个是小图.
大图为http://www.xxx.com/xxx/xxx/xxxx_1b.jpg，下划线前面怎么命名都无所谓，下划线后面必须以数字加"s"或"b"然后加".jpg"为结尾。
程序那就好配合了，小图由"LI"包含，用程序循环出来，只要图片命名正确了，JS会根据小图地址改变大图地址.
这段代码的核心是小图到最右边或最左边时候做个判断，再做个滚动，这个算法想了我好久，也请教了坛子里的不少高手，结果还是在自己的努力下完成了
由于之前一直没用过JQ，写这段代码的时候是边查API文档边写的，代码有不对的地方还请大家多包涵

作者: qxq864298 发布时间: 2010-05-27

我正需要这样的效果
楼主再加些代码说明就好了，我最近也在学JQ

作者: bluefamily 发布时间: 2010-05-27

感谢楼主的分享～

作者: jmtgj 发布时间: 2010-05-27

好强悍。就是界面需要美化下。还有就是切换图片的时候也应该切换每张图片的描述。。。。

作者: wangsdong 发布时间: 2010-05-27

谢谢楼上各位

做这个的时候公司没要求要切换描述，所以没做
要做的话可以用JSON或页面里的display来实现，方法很多

作者: qxq864298 发布时间: 2010-05-27

回复 5# qxq864298 的帖子

你也可以再写一个每张图片的描述啊。。

作者: wangsdong 发布时间: 2010-05-27

请查收

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://images.lafaso.com/css/site_v4.css" rel="stylesheet" type="text/css" /> <link href="http://images.lafaso.com/css/tswp_sec.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="photobg mauto"> <script src="http://www.lafaso.com/js/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript"> /*power by qiuxiaoqiang 2010.05.27*/ jQuery.fn.loadthumb = function(options){ options = $.extend({ src : "" },options); var _self = this; _self.hide(); var img = new Image(); $(img).load(function(){ _self.attr("src", options.src); _self.fadeIn("slow"); }).attr("src", options.src); return _self; } $(document).ready(function(){ var iNum = $("#smallpic img"); var site = 0; var childW = 135; iNum.click(function(){ var chanurl = this.src.replace("s.jpg","b.jpg"); $('#imge').loadthumb({src:chanurl}); var inc = chanurl.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } donextpic.Description(len); iNum.removeClass();$(this).addClass("on") }) $('#controlpre').bind('click',function(){donextpic.contpre()}); $('#controlnext').bind('click',function(){donextpic.contnext()}); $("#next").bind("click",function(){donextpic.turnRight()}); $("#pre").bind("click",function(){donextpic.turnLeft()}); donextpic = { turnRight:function(){ var p = $("#imge").attr("src"); var inc = p.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } len++; if(len != iNum.length+1) { $("#phototit").fadeOut() $('#imge').loadthumb({src:inc[0]+ "_" + len + "b.jpg"}); donextpic.Description(len) $('#smallpic li').each(function(){ if($(this).find("img").attr("src") == inc[0]+ "_" + len + "s.jpg" ) { iNum.removeClass(); $(this).find("img").addClass("on"); var sst = Math.abs(site) var count; if(site == 0) { count = len } else(count = len-sst) if(count>5){donextpic.contnext()} } }) } else { $("#phototit").fadeIn("slow") return false; } }, contnext:function(){ if(site != -(iNum.length-5)) { site-=1 $('#smallpic').animate({ 'marginLeft' : childW*(site) }) }else{return false} }, contpre:function(){ if(site != 0) { site+=1 $('#smallpic').animate({ 'marginLeft' : childW*(site) }) }else{return false} }, turnLeft:function(){ var p = $("#imge").attr("src"); var inc = p.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } len--; if(len != 0) { $("#phototit").fadeOut() $('#imge').loadthumb({src:inc[0]+ "_" + len + "b.jpg"}); donextpic.Description(len) $('#smallpic li').each(function(){ if($(this).find("img").attr("src") == inc[0]+ "_" + len + "s.jpg" ) { iNum.removeClass(); $(this).find("img").addClass("on"); var sst = Math.abs(site) var count; if(site == 0) { count = len } else(count = len-sst) if(count<1){donextpic.contpre()} } }) } else { return false; } }, Description:function(e){ $("#desbox li").hide() $("#desbox li").eq(e-1).show(); } } $("#photoclose").bind("click",function(){$("#phototit").fadeOut()}) }); </script> <div class="w950 bgwhite mauto"> <div class="pa10"> <div class="photodisboxL"> <div class="photobox"> <p class="photoboxletter"> 名称名称名称 </p> <div class="photoboxcont clear"> <div class="photoinbox clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic13.jpg" class="fl" /> <div class="fl photoboxcontin clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic16.jpg" class="fl ma07 cur" id="pre" /> <div class="fl photoboxcontpic ofh pos01" id="desbox"> <div class="phototitle" id="phototit"> <p class="phototitletop"> <em class="fl pt5">您已经浏览完所有图片</em> <img src="http://images.lafaso.com/images/zt/tswp/tswp_new37.jpg" id="photoclose" class="fr" /> </p> <p class="clear h30 pt10"> <a href="#" class="fl ml12">播放上一图集</a> <a href="#" class="fr mr12">播放下一图集</a> </p> </div> <p class="photoboxcontpicbox"> <img id="imge" src="http://images.lafaso.com/images/test/ss_1b.jpg" /> </p> <ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li> <li>88888</li> <li>99999</li> <li>10000</li> </ul> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic17.jpg" class="fl ma07 cur" id="next" /> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic14.jpg" class="fl" /> </div> <div class="photosmallbox clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic19.jpg" id="controlpre" class="fl mt43 cur" /> <div class="fl photosmallboxin ofh"> <div style="float:left; width:6000px;" id="smallpic"> <ul> <li><img src="http://images.lafaso.com/images/test/ss_1s.jpg" class="on" /></li> <li><img src="http://images.lafaso.com/images/test/ss_2s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_3s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_4s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_5s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_6s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_7s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_8s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_9s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_10s.jpg" /></li> </ul> </div> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic20.jpg" id="controlnext" class="fl mt43 cur" /> </div> </div> <p class="photoboxbottom clear ofh"></p> </div> </div> <p class="clear"></p> </div> <p class="clear"></p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: qxq864298 发布时间: 2010-05-27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="http://images.lafaso.com/css/site_v4.css" rel="stylesheet" type="text/css" /> <link href="http://images.lafaso.com/css/tswp_sec.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="photobg mauto"> <script src="http://www.lafaso.com/js/jquery-1.2.6.js" type="text/javascript"></script> <script type="text/javascript"> /*power by qiuxiaoqiang 2010.05.27*/ jQuery.fn.loadthumb = function(options){ options = $.extend({ src : "" },options); var _self = this; _self.hide(); var img = new Image(); $(img).load(function(){ _self.attr("src", options.src); _self.fadeIn("slow"); }).attr("src", options.src); return _self; } $(document).ready(function(){ var iNum = $("#smallpic img"); var site = 0; var childW = 135; iNum.click(function(){ var chanurl = this.src.replace("s.jpg","b.jpg"); $('#imge').loadthumb({src:chanurl}); var inc = chanurl.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } donextpic.Description(len); iNum.removeClass();$(this).addClass("on") }) $('#controlpre').bind('click',function(){donextpic.contpre()}); $('#controlnext').bind('click',function(){donextpic.contnext()}); $("#next").bind("click",function(){donextpic.turnRight()}); $("#pre").bind("click",function(){donextpic.turnLeft()}); donextpic = { turnRight:function(){ var p = $("#imge").attr("src"); var inc = p.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } len++; if(len != iNum.length+1) { $("#phototit").fadeOut() $('#imge').loadthumb({src:inc[0]+ "_" + len + "b.jpg"}); donextpic.Description(len) $('#smallpic li').each(function(){ if($(this).find("img").attr("src") == inc[0]+ "_" + len + "s.jpg" ) { iNum.removeClass(); $(this).find("img").addClass("on"); var sst = Math.abs(site) var count; if(site == 0) { count = len } else(count = len-sst) if(count>5){donextpic.contnext()} } }) } else { $("#phototit").fadeIn("slow") return false; } }, contnext:function(){ if(site != -(iNum.length-5)) { site-=1 $('#smallpic').animate({ 'marginLeft' : childW*(site) }) }else{return false} }, contpre:function(){ if(site != 0) { site+=1 $('#smallpic').animate({ 'marginLeft' : childW*(site) }) }else{return false} }, turnLeft:function(){ var p = $("#imge").attr("src"); var inc = p.split("_"); var len; if(inc[1].length == 6) { len = inc[1].substr(0,1); } if(inc[1].length == 7) { len = inc[1].substr(0,2); } len--; if(len != 0) { $("#phototit").fadeOut() $('#imge').loadthumb({src:inc[0]+ "_" + len + "b.jpg"}); donextpic.Description(len) $('#smallpic li').each(function(){ if($(this).find("img").attr("src") == inc[0]+ "_" + len + "s.jpg" ) { iNum.removeClass(); $(this).find("img").addClass("on"); var sst = Math.abs(site) var count; if(site == 0) { count = len } else(count = len-sst) if(count<1){donextpic.contpre()} } }) } else { return false; } }, Description:function(e){ $("#desbox li").hide() $("#desbox li").eq(e-1).show(); } } $("#photoclose").bind("click",function(){$("#phototit").fadeOut()}) }); </script> <div class="w950 bgwhite mauto"> <div class="pa10"> <div class="photodisboxL"> <div class="photobox"> <p class="photoboxletter"> 名称名称名称 </p> <div class="photoboxcont clear"> <div class="photoinbox clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic13.jpg" class="fl" /> <div class="fl photoboxcontin clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic16.jpg" class="fl ma07 cur" id="pre" /> <div class="fl photoboxcontpic ofh pos01" id="desbox"> <div class="phototitle" id="phototit"> <p class="phototitletop"> <em class="fl pt5">您已经浏览完所有图片</em> <img src="http://images.lafaso.com/images/zt/tswp/tswp_new37.jpg" id="photoclose" class="fr" /> </p> <p class="clear h30 pt10"> <a href="#" class="fl ml12">播放上一图集</a> <a href="#" class="fr mr12">播放下一图集</a> </p> </div> <p class="photoboxcontpicbox"> <img id="imge" src="http://images.lafaso.com/images/test/ss_1b.jpg" /> </p> <ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li> <li>88888</li> <li>99999</li> <li>10000</li> </ul> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic17.jpg" class="fl ma07 cur" id="next" /> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic14.jpg" class="fl" /> </div> <div class="photosmallbox clear"> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic19.jpg" id="controlpre" class="fl mt43 cur" /> <div class="fl photosmallboxin ofh"> <div style="float:left; width:6000px;" id="smallpic"> <ul> <li><img src="http://images.lafaso.com/images/test/ss_1s.jpg" class="on" /></li> <li><img src="http://images.lafaso.com/images/test/ss_2s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_3s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_4s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_5s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_6s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_7s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_8s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_9s.jpg" /></li> <li><img src="http://images.lafaso.com/images/test/ss_10s.jpg" /></li> </ul> </div> </div> <img src="http://images.lafaso.com/images/zt/tswp/tswp_pic20.jpg" id="controlnext" class="fl mt43 cur" /> </div> </div> <p class="photoboxbottom clear ofh"></p> </div> </div> <p class="clear"></p> </div> <p class="clear"></p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 bjzc 于 2010-6-2 13:10 编辑 ]

作者: bjzc 发布时间: 2010-06-02

怎么我点了一点反应都没....
IE8

作者: 8yong8 发布时间: 2010-06-02