说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

JQuery和CSS实现图片幻灯片显示

HTML文档下载 WORD文档下载 PDF文档下载
我们看到许多网站都有图片幻灯片显示效果,这对显示各种产品图片是非常有用的。

原作者:LLewisLiu
翻译:haobao okbase.net

下载源代码

介绍
我们看到许多网站都有图片幻灯片显示效果,这对显示各种产品图片是非常有用的。

编码
我们可以用JavaScript来实现,我们也可以用JQuery使代码更加简洁。
但客户访问网站上的产品页面,所有图片下载到了客户的PC机中,我们可以用JavaScript来控制图片。我们需要"上一张","下一张"按钮,一个所有图片的预览框,当用户浏览图片时我们为各图片放置附加描述。

HTML头部区域包含了JQuery文件、我们自己的JavaScript代码并将图片放入我们的幻灯片显示对象。

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/JScript3.js"></script>     <script type="text/javascript" src="js/JScript2.js"></script>     <script type="text/javascript"><!--     slider.AddImage("img/mini.jpg","Mini Cooper Volks Wagon");    slider.AddImage("img/nokia 3110.jpg","Latest Nokia 3110 fasdfsdfas fasfasfas");    slider.AddImage("img/nokia 6500.jpg","this asdfi afa africa");    slider.AddImage("img/printer.jpg","a cute printer asfd");    slider.AddImage("img/sony eric.jpg","coool cellphone");    slider.TitleField="#divTitle";    slider.Preview="#divPreview";    slider.Container="rImage";    //   -->     </script>

 

 

解释一下上面几行:
JScript3.js将帮助我们在当前浏览器弹出新窗口
JScript2.js包含了幻灯片对象(slider object),用于控制图片

如果你打开JScript2.js,你可以发现以下几行:

slider=new Object ();slider.Interval=2000;//2000ms

在JavaScript中,我们可以采用面向对象编程,首先,我们创建一个称为"slider"的对象,它有一个属性称为"Interval",代表定时器的时间间隔,值为2000ms。
下面几行非常重要:

slider.Images=new Array(); slider.Index=0; //image indexslider.TitleField=0;slider.Preview=0;slider.Container=0;

我们创建一个图片数组保存HTML的Image对象。
Slider.Index 将保存当前图像在数组中的索引号
Slider.TitleField 用于显示图片说明,我们将设为"<div>....</div>"
Slider.Container每次都被替换为要显示的图片,这是一个Image对象,它的src属性用于加载我们的图片。

 

现在我们可以为slider对象定义函数了:

slider.ShowImage=function(){document[this.Container].src=this.ImageLoc();//$(this.Container).src = this.ImageLoc();if ($(this.TitleField).exists()) {     if ($(this.Preview).exists()){          $(this.TitleField).html(this.Title());     }     else{         var count=this.Index;         count++;         $(this.TitleField).html(this.Title()+		"

"+count+"/"+this.Images.length); } } this.ShowPreviews();};
document[this.Container].src=this.ImageLoc(); 

上一行用于替换我们的image对象在屏幕上显示新图片。

$(this.TitleField).html(this.Title()+"

"+count+"/"+this.Images.length);

上面一行做了两件事:使用JQuery改变DIV的inner HTML俩改变图片的描述,然后添加在所有图片中的索引号。

你可以下载代码然后用FireFox,IE等浏览器测试。

十亿月PV网站秘诀:Reddit自失败中总结的25条经验 粉碎5个NoSQL流言:各司其职,NoSQL的出现比关系型更早 豌豆荚发力移动游戏平台,推出SDK 2.0 BlackBerry Jam Asia 2013即将在香港隆重召开,免费门票限量提供 小米发布会高潮迭起:米3、电视、Hugo大牛 谷歌放在Windows上的特洛伊木马:Chrome Apps应用平台 解析:Google基于数据驱动的招聘面试程序 决战“缓存”之巅:微软 vs. 亚马逊 雪中送炭:十大前沿移动应用开发工具 高通智能手表Toq都用到了哪些技术? 研发周报:修改一行SQL代码 性能提升了100倍 2013年NoSQL就业趋势分析 鲜为人知的静态、命令式编程语言——Nimrod 高性能Web应用打造攻略:扩展过程中20个最大的绊脚石 开源项目Marathon:让你的数据中心像谷歌一样运行 精益化运营:10款移动统计分析工具推荐 移动建站工具(一):分秒钟将Web网站移动化 移动周报:小米的“倚天屠龙记” 智能手表是个尴尬的产品 屏幕缺陷一枪毙命 看15岁的谷歌的前21位员工现在都在做什么 分析师:三星将失去中国市场份额的头把交椅 5款工具助你写出更好的Java代码 Noitom:&amp;quot;中国创造&amp;quot;的动捕技术 缘创派:帮助技术人员寻找创业伙伴 Nginx创始人Igor Sysoev解读Nginx的发展史 对女性友好的编程语言 ISC2013专家云集,畅谈全球网络安全 CTO俱乐部第109期下午茶:数据库之分久必合,合久必分 CloudConvert:支持移动应用的格式转化服务 Angular.js VS. Ember.js:谁将成为Web开发的新宠? 斯卡利沉寂多年后首谈乔布 他的离开错在董事会不在我 showMessageDialog的使用问题 disable mainmenu控件的某个subitem怎样实现 哈哈,需要短信网关IP地址及其源代码的快来顶一下。 sybase12.0安装时的问题??? 怎么样能用asp编写使得IE打开pdf文件?在查询后怎样还能在查询的输入框里面保留查询的输入? 如何使用TreeView进行分级管理 触发器的效率问题! 寻求解决方案 组件刷新问题,UP有分 请问 虚拟目录 和 WEB站点 有什么区别? DBEXPRESS的问题!很简单 请问那里有支持中文好的jsp开发的webmail下载?很急!谢谢大家了! 我如何在程序中切换输入法 怎么把一个COleDateTime类型的变量转成time_t类型(long型)变量? 结构成员这样定义 WCHAR bString[0]; 长度为0有意义吗? 关于DLL中的函数 如何动态分配指针数组? 哪里有关于delphi多线程资料下载? 急!!!SQL2000数据库IMAGE图象数据的存取?????? 这个存储过程怎么写? D7中的这个怎不见了啊-----急急 为什么只能传递两个汉字?有解决的办法吗? 关于DLL文件中的函数 lotus菜鸟请求急就!!!!!!!! 如何动态分配指针数组? 怎样实现点击按钮,将光标所在行的某列参数传到另一个form,显示出另一个表的某条相关记录? 这句话到底有什么含义??? T-SQL连接字符串的操作符号是? 问一个送分问题。 如何得到驱动器信息? (腊肉)欢迎讨论:简体、繁体同界面显示问题 請問在水晶報表里怎樣實現這樣的設計 谁有校友录? 欢迎讨论:简体、繁体同界面显示问题 用VB写了Lable控件,但不知如何把背景是否透明的属性加入 这堆警告是什么意思? 关闭API函数? 怎么按钮的字体的颜色改变不了? 关于图像识别,急急,谢谢 用Oracle8i(个人版)连接Oracle8问题(在线) 用quickreport如何做master/detail 報表 大家请看这段代码(部分):为什么returnValue第一次返回null,第二次返回正确??百分求解 发一个笑话--跟警察牛B的人 呵 请问如何用oledb连sybase11.9.2? 菜鸟问题 请高手指点 为什么服务器端用ontlitcp后informix无法启动呀?? 说能解释一下:阻塞和非阻塞,同步和异步的概念! 很急!拜托!! 欢迎讨论:简体、繁体同界面显示问题 图片上传的问题(100分) 如何直接向clob中插入数据并读出来(高分)? 双缩脲试剂能用于尿液中蛋白质的检测吗? 我不太懂他说的是什么意思 你的现在能玩了?我的还是不行啊!麻烦你教教我把! 如何用成语形容明知道是一件错误的事情,但是大家偷偷的都在做,并且成了不是秘密的秘密举例:社保规定社保基数必须如实申报,不能隐瞒,但是大部分企业都是按照最低基数申报,这样操作 环戊烷多氢菲的分子式 电路中电阻特点我用一道题来提问在电路中,R1=20Ω R2=30欧姆 两个电阻并联问总电阻是多少? 什么叫教学型机械臂 (1R,2R)-(-)-1,2-环己二胺 分子式,那里可以买到? “阳离子、阴离子通过静电作用形成的化学键称作离子键” 这是很多书上的定义.1、为什么要这样定义?2、哪一种化学键不是静电力的体现?3、化学上的定义,为何总是模模糊糊、模棱两可?砖 求问机械手臂过程如何计算? 这应该写什么了麻烦你请你告诉我 我不知道银河系在哪里谁知道吃饱了银河系怎么办 机械摆臂的设计中间是固定的,是上下往复运动,这种摆臂设计有没有具体地理论参考?望好心人解答. 写出下列化合物硝化反应的主要产物1.苯酚2.硝基苯3.苯甲酸 上海航空随机行李尺寸重量我有一个尺寸为484×202×426mm的电脑机箱,能带上飞机么? 怎样使机械臂高速运转 为什么下列化合物中,第一个环更易发生硝化反应两个化合物均是在第一个环易发生硝化反应。 帮我计算面积和步骤, HCL,CO2的熔点高低如何,并给下大致原因 极地汪洋是什么意思麻烦你务必告诉我i 迎春花是什么颜色啊 金属一般显正价是因为它在反应中一般不得到电子而只失去电子 这句话对吗 它发生硝化反应引入一个硝基时,产物只有一个硝基化合物我想知道.当看到这个条件时.我们能从中得到什么 或者知道什么 计算下列物质的质量:(1)0.2mol硫酸(2)5mol铝 能否用1mol金属反应中失去电子的多少来判断金属性强弱 拉布拉多黄还是黑色多 (1)0.2mol硫酸(H2SO4) 求物质的质量(全过程!) (2)88g二氧化碳 求物质的量(全过程!) 高温物体能否发出紫外线 人生执着什么 为什么蛋白质水解得到氨基酸是取代反应 根据酸碱电子理论,凡是金属原子都可以作为碱吗? 如果没有了执着,人生还有什么意义? 用来判断蛋白质水解程度的反应是:A 茚三酮,B亚硝酸,C异硫氰酸苯脂,D2,4-二硝基氟苯 正相分配色谱适合分离极性大的还是极性小的成分? 执着挣脱命运的枷锁什么意思.? 如果蛋白质水解后双缩脲反应呈阴性时,可以对水解反应程度作出什么样的推论? 氢氧化亚铁为什么先生成白色絮状沉淀在变成绿色絮状沉淀? 美女hr什么意思 数字逻辑实验 用555芯片实现8秒周期震荡电路!急, 谁在电子厂工作过,在电子厂工作好吗 函数y=-2tan(2x+π/3)的图像的对称中心 非线性混沌实验中倍周期分岔,混沌和奇怪吸引子的物理意义这是我大学物理实验中遇到的一个思考题.希望众位老师能够帮我回答这个问题.我需要它们的物理意义. 能用玻璃做大桥吗 地质构造理论当中的‘活动论’和‘固定轮’的区别是什么 解释非线性电路中,什么是混沌? 请问液压机器人手臂与电动机器人手臂相比优缺点,以及现在机器人手臂大多数采用的是那种控制方式, 枕状构造为什么能够确定地质年代?如上我差点忘了。放射性同位素可以用来确定火成岩石的绝对年龄。稳定同位素好像是判断岩石的物质环境与来源。 能沉水,有点香味,有油脂感的老料称杆是什么木料 圆柱坐标型机器人机械手臂是如何确定坐标的 初学疑问 高温下SiO2与碳酸盐反应生成CO2高温下SiO2与碳酸盐反应生成CO2 是不是假设没有高温条件能发生这个反应就能得出硅酸强于碳酸?但实际碳酸强于硅酸,反应能发生是因为有高温? 一听天命是什么意思救急啊 金属是不是只可能是电子的转移在感应起电中,正电荷可通过人体转移,但在金属中不是只要电子可以 怎么看两个离子会不会发生氧化还原反应 氧气为什么能被固体NaOH和浓硫酸干燥?>?>>? 金属在溶液中电子转移的能量基础是什么 金属键里静电吸引和 阴阳离子通过静电吸引所形成的化学键,叫离子键 我想问为什么是静电,而不是电 已知2mol硫酸分子,求物质的质量急急急急急急~~~ 有哪个成语是形容“明知道这件事不好还要去做的”? 力分解遵循的规律 什么意思?具体点说好吗?这些我不太懂.麻烦你了 形容明知道错的还要去做的(成语)至少4个 韩江原道前方哨所一士官遭枪击身亡 或翘臀又嘟嘴 壮汉翻拍“性感照”遭吐槽印媒:印度调整中国战略因不喜欢给中国日本进入“胖女时代”或因对瘦人审美疲人民日报海外版:监听门让世界彻底放弃移动设备进入美国儿童生活 使用人数两猫鼬欲擒毒蛇当美食 毒蛇凌厉反击赢得港媒:三中全会或开启中国“黄金时代”美国官员称奥巴马对监听各国政要事并不美学者:星巴克咖啡在中国必须贵 否则湖南纪委回应干部突击办酒:发现即查处最高法:健全和完善错案评价标准和问责霍英东遗产案于其忌日开庭 一方被批“汉字听写缺少科技内容:不能钻到茴香豆世界新闻报窃听丑闻开审 卡梅伦政府威叙利亚电子军自称攻破奥巴马推特账户日本9月份失业率降至4%摄影发烧友新宠:3D打印遮光罩(图)翘臀又嘟嘴 壮汉翻拍“性感照”遭吐槽美国在罗马尼亚反导基地开工建设【高清暴风雨影响法国数万家庭用电我国经济增速“鹤立鸡群”三因素促中国赞成对朝制裁新决议一起打球去希拉里和特朗普横扫“超级星期二”训练前要签到 迟到罚款以分钟计算四川横扫新疆 昂首挺进决赛打火机不慎点燃衣服女星瞬间成“火人”专职消防员表现突出给予奖励春季要减肥 吃饭按照三步走下轮对阵日本 中国女足全力一搏高空抛物砸中奔驰车微信提现开始收费太白实施光伏扶贫 足不出户就能挣钱齐达内平息C罗“炮轰”队友风波不到1年坏30多次 200多万元吊车本市与食药监总局 签署战略合作协议榆林航天上汽大众4S店 全新帕萨特上制裁有必要 无核是目的“埃神”立头功 上港亚冠正赛获首胜咸阳全国人大代表昨抵京拟交大会提案 已有200余件
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘