jquery 简单的图片展示效果

jquery练习——简单的图片结果展示效果--cnblogs libsource/

#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;
}

>

图片1

  • 缩略1
  • 缩略2
  • 缩略3
  • 缩略4
  • 缩略5

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'));
});
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery Lightbox 图片展示插件使用说明

    一.信息原作者:Benjamin Arthur Lupton当前版本:v1.3.7最终版发布日期:2009年4月25日项目地址:http://jquery.com/plugins/project/jquerylightbox_bal翻译编辑:张鑫旭(zhangxinxu) 二.安装在您页面的头部head中嵌入如下如下代码链接必须的JavaScript文件. <script type="text/javascript" src="js/jquery-1.2.6.pack.

  • Jquery 焦点图 用于图片展示效果代码

    Jquery 焦点图 用于图片展示效果代码

    效果图如下所示: 演示代码: Jquery图片展示焦点图 *{ margin:0px; padding:0px; list-style:none; border:0px;} body{ font-size:12px; color:white;} #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} #imageShow #imageSwitch{ position:absolu

  • 图片展示效果 鼠标经过变大图，支持FF

    图片展示效果 鼠标经过变大图，支持FF

    5 HTML { OVERFLOW: hidden } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 815px; CURSOR: crosshair; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 230px } #box { BORDER-RIGHT: gray 1px solid;

  • 33个优秀的 jQuery 图片展示插件分享

    33个优秀的 jQuery 图片展示插件分享

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,其中最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些精美的效果,给访问者对网站留下非常好的印象 1. Foxibox 2. MobilySelect 3. MobilySlider 4. Diaporama 5. Flipping Book Image 6. Spherical Panorama Viewer 7. Panel Gallery 8. Gallery

  • AJAX 图片展示框架56个 提升开发效率第1/2页

    AJAX 图片展示框架56个 提升开发效率第1/2页

    动态图片展示一方面能使用AJAX或Flash实现图片数据的异步获取,减少浏览的等待时间:一方面使用JavaScript+CSS定制友好的用户体验模式,是图片展览web应用程序开发的一大利器.这里收集的框架都是经过测试可用的,描述大多是各框架主页上的介绍,来不及翻译(有些是西班牙语的 @_@),主要收集来源为欧美和台湾的一些社区和博客,希望大家也能将自己收集的好框架拿出来一起分享! Ajax Image Galleries & Lightboxes MinishowcaseMinishowcase

  • jquery 简单的图片展示效果

    jquery练习--简单的图片结果展示效果--cnblogs libsource/ #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

  • jquery简单实现图片切换效果的方法

    本文实例讲述了jquery简单实现图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • 基于jquery的手风琴图片展示效果实现方法

    基于jquery的手风琴图片展示效果实现方法

    本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: 复制代码 代码如下: <!DOCTYPE html> <html class=''> <head>     <title>一款基于jquery的手风琴图片展示效果demo</title>     <style class="cp-pen-styles">

  • jquery的幻灯片图片切换效果代码分享

    jquery的幻灯片图片切换效果代码分享

    本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

  • asp.net+xml+flash实现的图片展示效果示例

    asp.net+xml+flash实现的图片展示效果示例

    本文实例讲述了asp.net+xml+flash实现的图片展示效果.分享给大家供大家参考,具体如下: 第一步:首先引入命名空间:(vs08环境中) using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; usin

  • jQuery简单实现title提示效果示例

    本文实例讲述了jQuery简单实现title提示效果的方法.分享给大家供大家参考,具体如下: /* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = fu

  • jQuery简单自定义图片轮播插件及用法示例

    jQuery简单自定义图片轮播插件及用法示例

    本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

  • jQuery实现磁力图片跟随效果完整示例

    本文实例演示了jQuery实现磁力图片跟随效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • JQUERY简单按钮轮换选中效果实现方法

    本文实例讲述了JQUERY简单按钮轮换选中效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>按钮轮换点击效果</title> <script type="text/javascript" src=

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

随机推荐