收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 8084|回复: 20

【分享】简单实用的JQ相册

[复制链接]
发表于 2010-5-27 12:44:36 | 显示全部楼层 |阅读模式
老样子,点运行后还要再刷新一遍JQ才能引入
小弟最近接公司要求,做个图库,由于要求图片要平滑浏览及动画效果,在时间及空间的双重压迫下(我也不知道空间是啥玩意) ,小弟放弃了以前写原生JS代码的习惯,研究了下JQ,下面就先呈上小弟的作品

 提示:您可以先修改部分代码再运行


这个对编辑的要求就是传图片的时候,必须以下划线为基准,比如:http://www.xxx.com/xxx/xxx/xxxx_1s.jpg,这个是小图.
大图为http://www.xxx.com/xxx/xxx/xxxx_1b.jpg,下划线前面怎么命名都无所谓,下划线后面必须以数字加"s"或"b"然后加".jpg"为结尾。
程序那就好配合了,小图由"LI"包含,用程序循环出来,只要图片命名正确了,JS会根据小图地址改变大图地址.
这段代码的核心是小图到最右边或最左边时候做个判断,再做个滚动,这个算法想了我好久,也请教了坛子里的不少高手,结果还是在自己的努力下完成了
由于之前一直没用过JQ,写这段代码的时候是边查API文档边写的,代码有不对的地方还请大家多包涵

[[i] 本帖最后由 qxq864298 于 2011-5-16 18:24 编辑 ]

评分

参与人数 1威望 +3 收起 理由
liuxinghonglei + 3 谢谢分享

查看全部评分

发表于 2010-5-27 12:56:41 | 显示全部楼层
我正需要这样的效果
楼主再加些代码说明就好了,我最近也在学JQ
回复 支持 反对

使用道具 举报

发表于 2010-5-27 13:03:08 | 显示全部楼层
感谢楼主的分享~
回复 支持 反对

使用道具 举报

发表于 2010-5-27 13:07:53 | 显示全部楼层
好强悍。就是界面需要美化下。还有就是切换图片的时候也应该切换每张图片的描述。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-5-27 13:10:37 | 显示全部楼层

回复 4# wangsdong 的帖子

谢谢楼上各位
做这个的时候公司没要求要切换描述,所以没做
要做的话可以用JSON或页面里的display来实现,方法很多
回复 支持 反对

使用道具 举报

发表于 2010-5-27 13:25:07 | 显示全部楼层
回复 5# qxq864298 的帖子

你也可以再写一个每张图片的描述啊。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-5-27 14:10:59 | 显示全部楼层

回复 6# wangsdong 的帖子

请查收

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2010-6-2 13:09:46 | 显示全部楼层

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 bjzc 于 2010-6-2 13:10 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-6-2 13:15:38 | 显示全部楼层
怎么我点了一点反应都没....
IE8
回复 支持 反对

使用道具 举报

发表于 2010-6-2 13:31:48 | 显示全部楼层
原帖由 [i]8yong8 于 2010-6-2 13:15 发表
怎么我点了一点反应都没....
IE8

刷新一下页面就有效果了~!
回复 支持 反对

使用道具 举报

发表于 2010-6-3 13:18:58 | 显示全部楼层
qxq864298 [楼主]

搜到
回复 支持 反对

使用道具 举报

发表于 2010-6-7 17:26:53 | 显示全部楼层

cwq2jxl

为什么要刷新啊?
回复 支持 反对

使用道具 举报

发表于 2010-6-18 17:00:53 | 显示全部楼层

亮点在此

下划线后面必须以数字加"s"或"b"然后加".jpg"为结尾。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-6-18 18:06:45 | 显示全部楼层
回复 12# lidaoliang  的帖子
点击运行JQ引入不了,必须要刷新一遍页面才能引入JQ
回复 13# fukan211  的帖子
s为small
b为big
回复 支持 反对

使用道具 举报

发表于 2010-6-19 08:53:16 | 显示全部楼层
路过。。非常不错。。我去改改CSS。给自己的似乎有点不好看。。
个人原因。不代表其他人啊。哈哈。

  1. <div style="float:left; width:6000px;" id="smallpic">
复制代码

太宽了。

[[i] 本帖最后由 wangsdong 于 2010-6-19 08:56 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-8-31 15:12:59 | 显示全部楼层

请教楼主

为什么图片路径必须是绝对路径呢,图片改为相对路径后,好像先点击缩略图,再点击上方大图左右滚动按钮,下方缩略图高亮就失效了。
回复 支持 反对

使用道具 举报

发表于 2010-8-31 15:36:16 | 显示全部楼层
ie8 下面运行不了 不兼容
回复 支持 反对

使用道具 举报

发表于 2010-8-31 15:52:15 | 显示全部楼层
可以做成同一页面多组图滚动吗?
回复 支持 反对

使用道具 举报

发表于 2010-8-31 17:05:05 | 显示全部楼层
学习了,我最近也在学这个呢!
回复 支持 反对

使用道具 举报

发表于 2010-9-1 13:19:50 | 显示全部楼层
如果必须刷新一下才可以用的话,这个不科学啊。谁浏览会刷新啊。没有几个人会知道不好使了,就刷新的。是不是这个技术还不成熟啊?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-9-1 13:26:25 | 显示全部楼层
To 16#
这个问题是根据地址截取字符出现的BUG,谢谢,我找时间修改一下,呵呵
To 17#
我这IE8下能兼容啊
To 18#
这个需要再花费些时间封装,呵呵,一般来说这个相册是一个页面单独的一个,类似其他门户的图片浏览
To 20#
这个需要刷新是因为点击运行后在这个页面上不能直接引入JQ,你放到本地或服务器上都没问题

[[i] 本帖最后由 qxq864298 于 2010-9-1 13:35 编辑 ]
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-20 13:58 , Processed in 0.218199 second(s), 13 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表