jquery 簡(jiǎn)單的圖片展示效果

更新時(shí)間：2009年12月16日 22:17:59 作者：

今天看到google圖片搜索結(jié)果頁(yè)面，感覺(jué)簡(jiǎn)潔實(shí)用，于是用jquery粗略的模仿了一下再次感覺(jué)到j(luò)query的強(qiáng)大和易用，基本思路初步實(shí)現(xiàn)了，再整合ajax和json，應(yīng)該可以做一個(gè)簡(jiǎn)單的應(yīng)用了 :)

<html> <head> <title>jquery練習(xí)——簡(jiǎn)單的圖片結(jié)果展示效果--cnblogs libsource/</title> <style> #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:100px;line-height:100px;float:left;text-align:center;border:1px solid #D5DDF9;margin-right:20px;cursor:pointer; } #cfoot li.cur{ border:1px solid #ffcc33; } #cleft,#cright{ float:left;text-align:center;width:50px;height:500px;display:inline-block;cursor:pointer; } #cright{ float:right; } .clearfloat{ clear: both;height: 0;font-size: 1px;line-height: 0px; } </style> </head> <body> <div   class="3hnfjb3"   id="cdiv"> <div   class="xhlnrld"   id="cright">> </div> <div   class="7rzphlp"   id="cleft">< </div> <div   class="fdvzddh"   id="cmain"> 圖片1 </div> </div> <br class="clearfloat"/> <div   class="5v33lpv"   id="cfoot"> <ul> <li id="znfv3zt"    class="cur" pv="圖片1">縮略1</li> <li pv="圖片2">縮略2</li> <li pv="圖片3">縮略3</li> <li pv="圖片4">縮略4</li> <li pv="圖片5">縮略5</li> </ul> </div> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> function setContent(){ var curobj=$("#cfoot li[pv]:first"); if(curobj.length>0) $("#cmain").html(curobj.addClass("cur").attr('pv')); }; function move(position){ position=position||"prev"; eval('var curobj=$("#cfoot li.cur[pv]");if(curobj.'+position+'("#cfoot li").length>0){$("#cmain").html (curobj.removeClass("cur").'+position+'("#cfoot li").addClass("cur").attr("pv"));}'); } $(function(){ $(document).keydown(function (e) { switch(e.which){ case 37: move('prev'); break; case 39: move('next'); break; default: break; } }); $("#cleft").click(function(){move('prev');}); $("#cright").click(function(){move('next');}); $("#cfoot li").click(function(){ $("#cfoot li.cur").removeClass("cur"); $("#cmain").html($(this).addClass("cur").attr('pv')); }); }); </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: