- 浏览: 399281 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (173)
- java 程序设计 (22)
- struct学习笔记 (11)
- spring学习笔记 (10)
- hibernate学习笔记 (5)
- oracle学习笔记 (2)
- javascript学习笔记 (17)
- jquery学习笔记 (10)
- CSS学习笔记 (16)
- 面向协议的编程 (1)
- jmf学习笔记 (1)
- EJB3.0学习 笔记 (3)
- linux学习笔记 (20)
- 云计算架构学习笔记 (1)
- php程序设计 (1)
- python程序设计 (0)
- 数据结构算法 (5)
- 数据库 (8)
- 数据库设计 (0)
- eclipse 插件 (3)
- resin (2)
- html5 (4)
- linux程序设计 (3)
- android开发 (0)
- 其他 (4)
- 服务器端脚本 (0)
- ruby程序设计 (0)
- perl程序设计 (0)
- 开放平台开发 (1)
最新评论
-
huxin889:
第三四张图片裂了
ant 打包 jar 可执行 -
leichenlei:
user.hashCode() 会出现负数,怎么处理?
mysql merge分表 -
niaoqq1:
不好使。来看看我的方法。js:var NodeArr=getS ...
java中如何在ajax发送参数的时候,参数以数组的方式传递到后数组台 -
zhijiandedaima:
为什么我的defaultCache是空,空指针异常啊
spring 整合memcache -
lt26i:
帮了大忙了向楼主学习
java中如何在ajax发送参数的时候,参数以数组的方式传递到后数组台
jquery幻灯片的效果浏览图片的插件有很多,但那些插件有时候往往不是我们需要的,比如当添加了某个插件我们页面原来的布局就完全被破坏了,这时候当我们不需要很复杂的效果的时候,还不如自己手动写一个有类似效果的插件。
效果图如下:
这个demo实现了点击上面的向左、向右的按钮,下面的缩写图也跟着变化,当点击下面制定的某种小图的时候,可以找到对应的大图显示。但还没有实现点击下面的向右、向左按钮的时候上面的大图也滑动。
下面是主要的代码:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="naxienian.css"/> <script src="http://images.zhenai.com/ex/public/js/jquery-1.7.min.js"></script> <script src="naxienian.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".change .pre").bind("click",preClick); $(".change .next").bind("click",nextClick); $("#gallery div ul li img").each(function(index, element) { $(this).bind("click",{index:index},handleThumbClick); });; }); function preClick(){ //先影藏所有的div类为image的元素,再显示下一幅图像 //获取当前显示的图片 var firstImg = $('#gallery div.img:first'); var currImg = $("#gallery .show"); if(currImg.index() == 0){ alert("已经是第一页了"); return; } //获取下一幅要显示的图片和需要显示的标题栏的内容 var preImg = (currImg.prev("div").length) ? currImg.prev():firstImg; //让当前的图像以动画的形式影藏 currImg.hide(); currImg.removeClass("show"); preImg.show(); preImg.addClass("show"); //同时让底下的缩写图也向前移动 var prevOperator = $("#gallery .list .pre"); prevOperator.trigger("click"); } function nextClick(){ var currImg = $("#gallery .show"); //debugger; if(currImg.index() == currImg.parent().children().size()-3){ alert("已经是最后一页了"); } //获取下一幅要显示的图片和需要显示的标题栏的内容 var lastImg = $('#gallery div.img:last'); var nextImg = ((currImg.next().length) ? ((currImg.next().hasClass('change'))? lastImg :currImg.next()) : lastImg); //让当前的图像以动画的形式影藏 currImg.hide(); currImg.removeClass("show"); nextImg.show(); nextImg.addClass("show"); //同时让下面的缩写图向右移动 var nextOperator = $("#gallery .list .next"); nextOperator.trigger("click"); } //处理缩写图被点击事件 function handleThumbClick(event){ //显示对应的大图 var index = event.data.index; var originImg = $("#gallery div.img:eq("+index+")"); var curImg = $("#gallery .show"); console.log(index); originImg.show(); originImg.addClass("show"); curImg.removeClass("show"); curImg.hide(); } </script> </head> <body> <!-- --> <div class="c" id="gallery"> <div class="img show" > <div> <span> </span> <a><img src="images/1.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/2.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/3.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/4.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/5.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/6.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/7.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/8.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/9.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/10.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/11.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="img" style="display:none"> <div> <span> </span> <a><img src="images/12.jpg" /></a> <span> </span> </div> <p class="op"> <a class="zhuancai">转采</a> <a class="xihuan">喜欢</a> <a class="pinglun">评论</a> </p> <!-- --> <div class="shoucang"> <p class="op2"> <a class="shoucang">收藏</a> <a class="zan">赞(<span>4</span>)</a> </p> </div> </div> <div class="change"> <a class="pre">上一张</a> <a class="next">下一张</a> </div> <!-- --> <div class="list"> <a class="pre"></a> <a class="next"></a> <div> <ul> <li> <img src="images/thumbs/t1.jpg" /> <span>1/20</span> </li> <li> <img src="images/thumbs/t2.jpg" /> <span>2/20</span> </li> <li> <img src="images/thumbs/t3.jpg" /> <span>3/20</span> </li> <li> <img src="images/thumbs/t4.jpg" /> <span>4/20</span> </li> <li> <img src="images/thumbs/t5.jpg" /> <span>5/20</span> </li> <li> <img src="images/thumbs/t6.jpg" /> <span>6/20</span> </li> <li> <img src="images/thumbs/t7.jpg" /> <span>7/20</span> </li> <li> <img src="images/thumbs/t8.jpg" /> <span>8/20</span> </li> <li> <img src="images/thumbs/t9.jpg" /> <span>9/20</span> </li> <li> <img src="images/thumbs/t10.jpg" /> <span>10/20</span> </li> <li> <img src="images/thumbs/t11.jpg" /> <span>11/20</span> </li> <li> <img src="images/thumbs/t12.jpg" /> <span>12/20</span> </li> </ul> </div> </div> </div> </body> </html>
完整的代码可以下载附件:
这个demo用到的资源都是来自AD Gallery 1.2.7 demo里面,这个插件很强大(相对我的demo)。如果需要的人可以看看。
下面是效果图:
- jquery_实现幻灯片浏览图片效果.rar (3.4 MB)
- 下载次数: 4
- AD_Gallery_1.2.7_-_副本.rar (3.4 MB)
- 下载次数: 3
发表评论
-
jquery mobile tel call
2013-04-16 17:29 1352在jQuery mobile中,如果我们需要客户端手机 ... -
自己写的一个简单的jquery 日期插件
2012-09-12 00:52 5157写日期插件主要的2个问题: 1。计算某个月有多少天,2 ... -
jQuery 瀑布流插件
2012-09-10 16:33 1434瀑布流布局在目前貌 ... -
jQuery写的tab选项卡
2012-07-14 22:39 1133选项卡的主要原理是给每个标题栏注册事件,事件处理函数的作用就是 ... -
用jQuery的动画函数实现幻灯片的效果
2012-07-13 10:57 1198jquery的给我们提供了一 ... -
jQuery用面向对象的思想来编写验证表单的插件
2012-07-12 21:35 1172本人的重点是怎么构建一个简单有效可 ... -
Jquery实现返回顶部的功能
2012-06-04 23:51 1200<!DOCTYPE HTML PUBLIC " ... -
项目中常用的jquery 范例
2012-05-04 17:09 1313文会给你们展示50个jquer ... -
jquery 判断某个元素是否绑定 click事件
2012-05-04 16:38 2770判断 id为foo的元素上 是否绑定了click事件 ...
相关推荐
9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿...
jQuery相册图库图片浏览展示特效,可直接拿去当焦点图用,左侧显示缩略图列表,右侧为大图片显示,里面一共有8个例子,有些例子是展示如何实现图片淡入淡出效果的,有些是演示最基本的图片切换,有一些则是完整的...
15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery...
15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery...
15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery...
9.jquery仿flash的图片幻灯片播放特效实例完整版 10.jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11.jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12.jQuery仿动感...
解压密码:RJ4587 今天给大家介绍一款功能强大的jQuery幻灯片播放插件,这款jQuery幻灯片插件是我目前见过功能最完善的,支持全屏浏览,鼠标拖拽切换,自动播放图片以及下载等功能。我们可以利用这款插件制作漂亮的...
这是一款使用jQuery Masonry和css3制作的全屏响应式瀑布流网格布局插件。该插件布局采用流行的瀑布流布局,当点击查看更多链接,会切换到该项目的全屏幻灯片模式,在幻灯片模式下可以浏览所有的图片和信息。
获取概述,请按Escape键或Delete键,然后单击幻灯片以直接转到该幻灯片 如何:制作自己的滑板 幻灯片的核心是简单HTML文件。 每张幻灯片可以是任何html元素,但通常是div或section。 您可以通过在jQuery选择上调用...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象...
Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象...