html head titlejquery练习——简单的图片结果展示效果--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 id="cdiv" div id="cright" /div div id="cleft" /div div id="cmain" 图片1 /div /div br class="clearfloat"/ div id="cfoot" 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 /div script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script script type="text/javascript" function setContent(){ var curobj=$("#cfoot li[pv]:first"); if(curobj.length0) $("#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").length0){$("#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需刷新才能执行]