jquery 简单的图片展示效果

<html> <head> <title>jquery练习——简单的图片结果展示效果--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>>< 图片1 <br class="clearfloat"/><ul> <li 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><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需刷新才能执行]