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实现下拉菜单效果的代码
一个用jQuery实现的下拉菜单，非常的简单，学习jquery 的朋友可以参考下。
2010-07-07
从零开始学习jQuery (七) jQuery动画实现让页面动起来
开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单!
2011-02-02
jQuery文字提示与图片提示效果实现方法
这篇文章主要介绍了jQuery文字提示与图片提示效果实现方法,涉及jQuery针对鼠标事件的响应与页面元素动态操作相关技巧,需要的朋友可以参考下
2016-07-07
Jquery 实现table样式的设定
这篇文章主要介绍了Jquery 实现table样式的设定方法的相关资料,需要的朋友可以参考下
2015-01-01
jQuery.parseHTML() 函数详解
这篇文章主要介绍了jQuery.parseHTML() 函数,用于将HTML字符串解析为对应的DOM节点数组,需要的朋友可以参考下
2017-01-01
jQuery中wrapAll()方法用法实例
这篇文章主要介绍了jQuery中wrapAll()方法用法,实例分析了wrapAll()方法的功能、定义及匹配元素的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery动画效果animate和scrollTop结合使用实例
animate是jq的一个特效的函数方法，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。
2014-04-04
javascript loadScript异步加载脚本示例讲解
本文讲解了javascript异步加载脚本并触发回调函数的方法，在加载远程数据的时候可以用到，下面提供代码示例和源码
2013-11-11
jQuery ajax 路由和过滤器使用说明
好的web api应该在url里面有足够的信息，并且每个资源方法有它对应的url。
2011-08-08
jquery ajaxfileupload异步上传插件
这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11

jquery 简单的图片展示效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具