jquery 简单的图片展示效果

更新时间：2009年12月16日 22:17:59 作者：

今天看到google图片搜索结果页面，感觉简洁实用，于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用，基本思路初步实现了，再整合ajax和json，应该可以做一个简单的应用了 :)

<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> <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://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需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery和javascript中如何将一元素的内容赋给另一元素
将一元素的内容赋给另一元素，在某些情况下还是比较实用的，下面为大家讲解下jquery和javascript中是如何实现的
2014-01-01
jQuery实现的倒计时效果实例小结
这篇文章主要介绍了jQuery实现的倒计时效果,结合实例形式总结分析了jQuery针对日期与时间的运算实现倒计时功能的相关技巧,需要的朋友可以参考下
2016-04-04
使用jquery给input和textarea设定ie中的focus
在浏览网站的过程中，我们经常可以看见当鼠标点击后样式改变的文本框和文本域,那么这种效果是如何实现的呢?
2008-05-05
基于jQuery倾斜打开侧边栏菜单特效代码
基于jQuery多重图片无限循环动画效果，本文给大家分享基于jQuery倾斜打开侧边栏菜单特效代码，感兴趣的朋友可以参考下
2015-09-09
推荐40款强大的 jQuery 导航插件和教程(上篇)
在下面的集合中，你会发现很多便利的 jQuery 导航插件和有用的教程，帮助你实现充满吸引力的网站导航，让你网站更有组织性和交互性
2012-09-09
把html页面的部分内容保存成新的html文件的jquery代码
把html页面的部分内容保存成新的html文件，用到了jquery的获取指定id的内容。然后保存代码。
2009-11-11
jquery中 $.expr使用实例介绍
这篇文章主要以示例介绍了jquery中 $.expr使用,需要的朋友可以参考下
2014-06-06
jquery通过索引值操作html元素的代码
这篇文章主要介绍了jquery通过索引值操作html元素的代码,需要的朋友可以参考下
2023-05-05
jQuery getJSON()+.ashx 实现分页(改进版)
参考了上一篇Asp .net ＋jquery +.ashx 文件实现分页并作了改进:ashx返回json数据，减少传输数据量，html页面样式控制也比较灵活，感兴趣的朋友可以参考下哈
2013-03-03
利用jQuery实现漂亮的圆形进度条倒计时插件
jQuery Final Countdown是一款时尚的圆形进度条样式的jQuery倒计时插件。本篇文章给大家分享利用jQuery实现漂亮的圆形进度条倒计时插件，感兴趣的朋友一起看看吧
2015-09-09