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

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等浏览器测试。

业界良心 Facebook下一步将开源交换机 Google Glass:未上市先遇阻 TIOBE 2013年5月编程语言排行榜:Objective-C再度反超C++ 开发者需知的10类工具 林仕鼎:架构设计与架构师 跨平台工具火拼:Icenium与PhoneGap Build谁属王者? 索尼终于想明白了:PlayStation生态走向开放 高达10亿美元,Facebook为什么要收购Waze? Cocos2D-X成全球第二大游戏引擎 仅次于Unity 亲爱的苹果,能不能别让应用太廉价? 陈晓影:一位女海归曲折的拓荒故事 IDG李丰:在中国,创业公司最好是一个One Man Company Google Drive新增“保存到Drive”按钮功能 可自行添加 腾讯CDC创始人唐沐加盟小米 总经理陈妍接任 老板我想辞职:因为小米100万元征集一张壁纸 移动周报:GitHub上最火的Android开源项目 免费才是王道:盘点开发者须知的25个免费数据可视化工具 Pivotal获通用电气1.05亿美元支持 或将改变大数据和物联网的游戏规则 大掌门与阿里云和解:云生态系统呼之欲出 刘有涛:恩信科技云计算大潮中扬帆起航 Cloudera释放Impala 1.0:与Hadoop完全整合,各方面完爆Hive 云通讯平台:让你的应用会说话 触宝用户过亿,CEO王佳梁常说的词是“创新” 全国电脑健康日启动 360搭建电脑维修开放平台 C语言实现归并排序 360石晓虹:针对移动Apps的DDoS攻击将成重大威胁 更社交化:谷歌将推出Google Play平台服务 C语言对磁盘文件进行快速排序 传Google已关闭短信搜索服务 PayPal首席安全官:靠密码验证身份即将寿终正寝 DRM你又赢了:其API纳入HTML5标准 怎么在WM_DRAWITEM自画LISTVIEW? 有关txt文件操作的问题? 一个很奇怪的问题,高手请看, 马上给分 那里有更多的skinengine换肤文件? 奇怪的问题,高手请看,马上给分! 怎样给一个OLE控件其内置的事件编写脚本? 请问各位能否将一个VF的数据库方便的转为ACCESS数据库 如何关联一个扩展名到我的程序? 我有一个备注memo的字段,想更新?如何进行? www.ipowerweb.com 的主机怎么样? 高数、线性代数与程序员!!! Sworddx,补分给你 怎么做定时 这个listctrl问题怎么老没有人回答我?????? TQuery为什么没有这个属性? 哥哥们 ,谁能帮我? 高分,谁有奇域外挂? 急急!!winsock 在网速特别慢的时候,发送与发送之间有一个等待时间,这个时间是不一样的!!! 关于表单的先后顺序 万分火急,关于authorware的? 关于用ASP调用SQL 数据库存储过程的问题!高手帮忙 提议:共同作个小项目 急需解决字符串中的千位分割符去除的问题?在线等 修改客户端资料 AUTOCAD2002的授权号在哪里弄呀?? 网站首页跳出一个小广告或者通知的网页大小 初来乍到 怎么才能让DATA控件支持ACCESS2000? 可否推荐几个对考系分有帮助的网站?先谢了。 初学者的问题 项目开发:select,insert,等要不要直接写在程序事件里面,还是要用DW做操作?? 翻一次页需要80秒,有什么好办法提高效率? 将灵魂出卖给Microsoft?还是选择Sun One? 昨天在公车上目睹……(亲身经历) 用什么样的报表、表格控件好呢? 如何插入一个memo备注字段的纪录 ole字段相互负值,该怎样写呢? 关于delphi局部结构变量,初始化问题。这事儿说起来很惭愧。。。。 中软的叫我去作软件外包,请问给为老大我该去吗 为什么不能访问http://www.apache.org/了? [高难问题]如何让asp启动的程序,显示在服务器端,而不光是个进程 迫切需求Dundas Chart FOR ASP.NET 3.1企业破解版 收到了BORLAND寄来的奖品,送分庆祝,请斑竹不要介意! RichText关联的文件怎么保存? 誰能解決"Read failure"的問題﹖送500分。 求更好的文本编码方法 在delphi中如何实现多副jepg图片存储数据库???? SOS!请教一道变态题目 我是头感情上的猪,我不懂的控制我自己的感情。 那里下载 visual studio.net (在线等待) 帮忙看看这段简单的代码 请问室内公共游泳池的高度一般是多少?我写错了,我指的是层高,从地面到屋顶~不好意思,我的错, 史记中不可能记载的是A.大泽乡起义 B.春秋争霸 C.大禹治水 D.昭君出塞 某农业专业户建造一个形状是直角梯形的苗圃,其邻变借用夹角为135°的两面墙,另外两边用长喂30米的篱笆围起来,设苗圃的垂直于梯形两底的腰长为x,试用解析式将苗圃的面积表示为x的函数 为什么人都会喜怒无常? 有没有人知道“善终”的反义词可以用什么?同上,没有补充了. 要建一个直角梯形的苗圃,两临边用夹角为135的两面墙,另两边总长为30米,若垂直底边的腰长为x米,...要建一个直角梯形的苗圃,两临边用夹角为135的两面墙,另两边总长为30米,若垂直底边的腰长 You Is it right?Hate me,don't want to talk to 请问有没有人知道无处不在的反义词或者类似意思相反的四字词是什么呢 拉面拉第几次有32根面 人是怎样成长的啊?如题 同源染色体怎么数啊 排词成句:吹着 春风 温暖 轻轻地 的 春天 人是怎么样一步一步长大的?人是地球上有智慧的物种. 有丝后期同源染色体怎么数 拉面数学题要拉510根要拉多少次 全身包括手和脚都痒,且出现像被蚊子咬过的包,是怎么回事而且挠过之后,会随之其一小片的包最早出现在手上吧,开始觉得手有点痒,像是被蚊子咬了,却没有包,就是略微有一点红. 分裂各期同源染色体数最好能讲的详细点,关于同源染色体的我一直都搞不清急!我指的是减1的间期、前期、中期、后期、末期、和减2的间期、前期、中期、后期、末期的详细说明 漏电保护器的额定动作电流和额定不动作电流分别为30毫安和15毫安那当漏电电流为20毫安时漏电保护器动作么 有一位老奶奶在看报,一只蚊子正想要叮她,老奶奶手和脚都没动,为什么蚊子会突然死掉了? 南丁格尔事迹(短文) 请问甲功八项检测有什么作用 琥珀里的蚊子肚子里的血液DNA或RNA的活性能保持多久呢? 请问哪些书是在高中需要阅读并且要考得? 请帮看下甲功八项检测报告单,是什么病?甲状腺弥漫性病变肿大 伴单发0.5*0.5边界清晰结节项目代码 项目名称 结果 参考值FT3 游离三碘甲状腺原氨酸 2.28 1.45--3.71 pg/mLFT4 游离四碘甲状腺原氨酸 一个房屋地基为三角形求占地面积一个房屋地基呈三角形状.三角形的边长分别为9米、12米、15米,花园由据地基边界5米之内的土地构成,问房屋连同花园共占地多少平方米?精确到1平方米.(过 下列不能通过叶片上的气孔交换的气体是?A.氧气 B.水蒸气 C.二氧化碳 D.有机物 请帮我看一下我的甲功八项化验单病情描述(发病时间、主要症状等):T3——1.623(0.78-2.2) T4——90.819(42-135)TSH——3.054(0.3-5.0),FT3——3.961(3.19-9.15)FT4——14.482(9.11-25.47)TGAB——0.348( 邻居盖房子,地基下降1--2米,且中间只留1米宽这对我家会有影响吗 谁给形象地解释一下什么是单向值传递方式地址传递方式又是什么意思呢 甲功八项是什么 侏罗纪公园基因计划琥珀怎么用,我买了琥珀,但是不知道怎么叫科研小组吧DNA提取 如何用形象地语言来解释兴奋在神经元间的传递 次年是什么意思 所有的平行四边形、所有的三角形、所有的正方形、所有的梯形这几个一定是轴对称图形 如图,已知:AB=CD,∠A=∠D,求证:∠B=∠C梯形 次年 是什么意思 四分之三x-50%x=17.5四分之三x减百分之五十x等于十七点五 一花农计划借助两面夹角为135°的残墙围出直角梯形的花圃,围花圃总材料长45米问如何取两直角边长,可使花圃面积达到最大,最大面积为多少 具有吸附性的多孔材料有哪些? 无纺布的主要用途是什么?做无纺布外贸如何开发新客户? 已知:如图,AB与CD相交于点E.求证:∠A+∠C=∠B+∠D 为什么多孔的材料和多孔的结构有利于吸收噪声? 四分之三x减百分之五等于17.5怎么解 如何快速解决行测中的计算题 如图,一块直角梯形苗圃的两条邻边是夹角为135°的围墙,另外两条边用总长为45米的篱笆围成.问;篱笆的两条边各是多少米时,苗圃的面积最大?最大面积是多少? 二元氯醋树脂与丙烯酸树脂的能混溶吗?将丙烯酸树脂和二元氯醋树脂同时溶解在一个溶剂里, 四分之三X除以百分之五X=17.5 寻求行测计算题解答甲、乙两人从400米的环形跑道的一点A,背向同时出发,8分钟后,两人第三次相遇.已知甲每秒钟比乙每秒钟多行0.1米,那么,两人第三次相遇的地点,与A点沿跑道上的最短距离是 请问氯醋树脂运用到哪些油漆上 y=-4x+5和y=4x+5的值域怎么求 生产队预计30天修完一条水渠,先用18个人修12天完成工程的1/3,如果要提前6天完工,还要增加多少人? 三元氯醋树脂使用哪种硅烷偶联剂 开账的意义是什么 含有雌和它的反义词的成语如题 什么人让我成长? 1-x=四分之三,17分之15-x=17分之11,11分之10-x=11分之6偶妹滴题,我跟她讲她不信, 校园要建苗圃,其形状为直角梯形,其中有两边借用夹角为135度的两面墙,另外两边是总长为30米的铁栅栏求梯形的面积y与高x的关系式求x的取值范围请写出具体算式, 屋顶可以放置小型游泳池吗小高层混凝土结构顶层,可以放置直径2.5米深75cm的小型游泳池吗,游泳池本身是塑料材质重量忽略不计,水注满时大约4.2立方. 司马迁的《史记》中,不可能记载的历史事件是( )A.少康中兴B.成康之治C.昭宣中兴D.文景之治 校园要建苗圃,其形状为直角梯形,其中有两边借用夹角为45度的两面墙,另外两边是总长为30米的铁栅栏(1)求梯形的面积Y与高X的表达式; (2)求X的取值范围 俄网站曝光斯诺登游艇照 金发美女陪伴智利科金博附近海域发生6.6级地震 杭州本周末或是最后一个有桂花香的周末夏宝龙:治污水防洪水防内涝 全面打好斯诺登将为俄网站“打工”芝加哥农产品期价31日全面下跌菲律宾议员“港人生命值钱说”激起香港美国女童目睹家人被烧死 获赔1.5亿梅丽尔·斯特里普曾有婚外恋俄罗斯核武部队大规模战略演习 抗衡北儿子接父亲同住享清福 父亲天天赌博逼男子电话打到派出所求厕纸 不多久再抱杭州13岁女生撒谎离家失踪5天 曾结医生举报官员公款出游 出门戴钢盔执擀台湾花莲地震波及浙江 温州某酒店上演台湾花莲地震波及浙江 居民称高楼摇晃国家级电视剧节目推介会首次移师杭州杭州政协委员建议传统产业“电商化”杭州重机厂将变身时尚商业中心浙江省提前3个多月完成全年保障房任务杭州未来两年技术研发类人才需求最大贝克汉姆长子将离开阿森纳复旦大学江湾校区基建严重违规节目走心,才能深入人心贝克汉姆长子将离开阿森纳余秋雨推出首部长篇小说《冰河》日旅客运送量创春运新高香港一天内再增19宗流感死亡病例“保持怪异,保持与众不同”车乱停堵住五路居地铁口“人民的形象”引来人民围观机场安检高峰时段出现在早晨余秋雨推出首部长篇小说《冰河》本市年内将新增万亩湿地少放爆竹,空气蛮好18.5万人次观众进剧场看大戏邹市明自信拳技仍世界最强记者回乡记倾听心语3月沪深两市迎限售股解禁高峰电力 为市民应急送电1954次逛厂甸庙会
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘