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

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

用VB实现双向循环链表 用VB实现用户登录密码的修改 用VB与MS-Draw开发通用作图软件 用VB制作TopMost类型窗口 用VB制作Windows风格安装盘 用Visual Basic 6创建基于MTS的商务组件 用Visual Basic实现Windows的重启动 VB用Windows管理技术做你的应用程序 VB用程序给标识字段(ID)赋值的一种简单实现方法 VB用自己的'PROGRAM'测试自己的电脑 有 BitMap 之Menu -VB资料 运行其他程序,并等待执行完毕 -VB资料 再谈VB程序的加密 在 VB 程序中如何设定 Mouse 光标的位置? 在ActiveX DLL工程中慎用App对象-VB资料 在ActiveX控件工程中设置DataField属性-VB资料 在VB中异步执行程序 在VB编程中有效地组织和利用资源 在VB应用程序中巧用DLL 在VB应用程序中使用INI文件的一点体会 在VB中操纵OLE服务器应用程序 在VB中改变显示器的分辨率 在VB中获取和修改计算机名字 在vb中没有指针,怎样才能将数组作为参数。 在VB中如何调用C++Builder创建的DLL 在VB中设置常用的外部设备 在VB中使用枚举变量 在Visual Basic 中使用C++ 类 在WindowsNT网络中广播消息 -VB资料 在可编辑控件中创建一个新的上下文菜单 -VB资料 在软件中设定热键-VB资料 如何返回在sql server中自己设定的错误提示..... ocp是什么? 當手機 被盜 後的措施 好象没什么人啊 祝斑竹zxyufan(宇凡)考试顺利 :) 高手请进!!!!!!! 怎么从一个字符串中截取字符串 关于软件的序列号的问题? 哪位高手给解释一下啊??? 各位DX:怎样在填完一个文本框后光标自动跳到下一个框里?很急的,解决一定给分! treeview问题,我只能给这么多分了,拜托大家,急死我了!!!! 连接数据库的一个参数:Initial Catalog=Music 是什么东西,在那里设置? 在DELPHI中能用ADO连接远程有固定IP的数据库服务器上的数据库吗?怎么连接? 各位兄弟姐妹,快来看呀! 请教各位大虾:我在上网的时候为什么老是死机,鼠标键盘一动不动了!!! pb中访问数据库必须通过datawindow么? 为什么就差这么一点了~???快帮帮忙啊~! OO里面的"is a"和"has a"应该如何理解啊?举个例子看看 请问在哪可以找到可以做简历封面的图片呀?后天就是招聘会啦,快快帮忙呀~~~ javaServlet的一个问题。急! DELPHI高手!-----300分 ASP开发问题,如何在用户提交注册信息时自动分配给它一个用户ID号? 我想在 Excel 中给文件字加双下划线,可是编译时提示变量没有定义 有谁能给我一份简单的COM代码? 有关interface??? 昨晚,初恋情人不经意的出现在梦中,你到底离你的初恋情人有多远,撒分了 一个昨天没搞明白的问题! redhat 7.2中如何设置代理服务器 求教高手一个Java中一直困扰我的问题,急!急!急! 谁能够给我个例子实现 Dll向应用程序单向通信 Dll->EXE?50分? 请问.......... 在数据窗口拖动垂直滚动条死机。只能ctrl+alt+del结束任务。倾听你的声音。 请教各位大虾两个Sql语句 哪里有visual studio.net下载? 那里有sql server 2000企业版下载的 xml的学习??????双儿 怎么比较两个LPTSTR字符串啊??? 语句“rs.Open sql,conn,1,1”中后边的两个数字参数是何意思? 如何获取datawindow中文本框内容? 请教公司大院网络系统设计方案要怎写?会遇到什么问题? 关于clientdataset的返回值问题 关于报表打印的问题!火急。。 这个世界上有多少C/C++程序员? 关于ARP广播域的问题????????????????、 请问什么服务器支持global.jsa 安装oracle数据库出错!!!!!!!!!!!! 如何在对话框的OnPaint()函数中得到该对话框的窗口大小? 一个看似简单却很棘手的问题,不得不请教各位。。。 哪里有将rm文件转换成avi或者mpg格式的软件? 关于ARP广播域的问题?????????????? 请问,,怎么设定mshflexgrid的属性,使其各列的宽度与数据源字段的宽度一致 语法专练:写出下列单词的复数形式.1.is/am 2.you ;he/she/it 3.this ;that 4.(1)desk ;orange :toy(2)class ;bus ;box (3)family最快并答对给分 石灰与石膏怎么区分刷在墙上的是石灰还是石膏 石灰加水会爆炸吗? 配制200毫升10%的稀硫酸溶液需98%浓硫酸多少毫升(98%的浓硫酸溶液的密度是1.84g/ml,10%的稀硫酸溶液的密度为1.07g/ml) 石膏和石灰是一样的吗?现在的石灰是袋装的,像浆状的,和以前的干石灰一样的吗? 虎门销烟中为什么用石灰加水?发生了什么化学反应? 配置200克24.5%稀硫酸,需多少克的浓硫酸.实际操作时,取98%浓硫酸多少毫升? 石膏和石灰之间到底是什么关系?石膏粉加水变石灰,还是石灰粉加水变石膏啊? 石灰加水为何会产生热能>?建筑房子时,石灰加水就会达到上百度,这是为何?请给出化学公式与说明```` (4)配制1000毫升10%的稀硫酸溶液需98%浓硫酸多少毫升? she变复数 石灰加水,能腐蚀纸吗? 由配置500g20%的稀硫酸,需要98%的浓硫酸和水各多少毫升?(98%的浓硫酸和水的密度分别为1.84g/ml,1g/ml) 几道英语题变复数.Who is I 改为复数 Who ___ ___?Who is she 改为复数 Who ___ ___?RT 在100千克浓度为50%的硫酸溶液中,再加入125千克浓度为5%的硫酸溶液,就可以配制成浓度为多少的硫酸溶液? She is a policewoman.改为复数形式 在浓度为50%的硫酸溶液100kg中在加入多少kg浓度为5%的硫酸溶液就可以配制成浓度为25%的硫酸?(算式) 当先行词是one of .时 ,关系代词作主语,谓语动词用单数还是复数 要配置质量分数为百分之10的稀硫酸196克,需要百分之98的浓硫酸()克,水()克 50%的硫酸100kg和10%的硫酸500kg能配制多少kg30%的硫酸溶液? only one of,the only one of 做主语,谓语动词分别用单数还是复数?尤其是only one of. 配制质量分数为40%的稀硫酸400ml,需98%的浓硫酸____ml,水____ml铅蓄电池中的电解液常用30%-50%的稀硫酸.欲配制质量分数为40%的稀硫酸400ml(密度为1.3g/立方厘米),需98%的浓硫酸(密度为1.84g/立方 某钢厂欲配制20%的硫酸溶液500kg,已有51%的硫酸溶液100kg,还需98%的浓硫酸()kg.水()kg one-fifth of the five apples 做主语,谓语动词用单数还是复数啊? 配制100克百分之20的稀硫酸,需百分之98的浓硫酸多少ml?需加水多少ml?百分之98的浓硫酸的密度为1.84g/ml 有浓度90%的硫酸溶液100kg和浓度10%的硫酸溶液500kg,问使用这两种硫酸溶液最多能配成浓度为30%的硫酸溶液答案是400 为什么不是1400/3 干石灰1方有多少吨 水泥石灰砂浆1:0.2:2的配合比是怎么样的 一立方石灰等于多少吨 one or two +名词复数 谓语动词用单数还是 复数,请举例其他情况, 有100千克浓度为50%的硫酸溶液,在加上多少千克浓度为5%的硫酸,硫酸溶液就被稀释成了25%的浓度? 一立方生石灰(粉)等于多少吨? 配制40%的稀硫酸溶液100ml,需要98%的浓硫酸多少毫升? 在100千克浓度为50%的硫酸溶液中,再加入多少千克浓度为5%的硫酸溶液,就可以配成浓度为25%的硫酸溶液? 英语语法:名词单数变复数的几种形式 one or two 做主语事谓语动词用单数还是复数 数学应用题在100千克浓度为50%的硫酸液中再加入多少浓度为5%的硫酸溶液 ,可以配成浓度为25%的硫酸溶液. 英语单词,将名词单数形式改为复数形式boytomatomonthcomedypartykeyeggmovieclass就这些,有点多,改成复数形式,不确定的不要 经计算 配制100ml 1mol L的稀硫酸需要用量取上述浓硫酸的体积Ⅱ.现用该浓硫酸配制100 mL 1 mol/L的稀硫酸.可供选用的仪器有:①胶头滴管;②烧瓶;③烧杯;④ 药匙;⑤量筒;⑥托盘天平.请 she he it 复数 WE的单数形式 SHE的复数形式 英语的名词单数变复数怎样变 实验室如何用固体氢氧化钠和浓硫酸分别配制稀的氢氧化钠溶液及硫酸溶液 一堆沙,甲车运走十三分之五吨,剩下的沙占沙总量的九分之八,剩下多少吨沙?只求列式! 英语复数形式和单数形式复数形式和单数形式是什么.详解. he\she的复数形式 she is a girl复数 在100千克浓度为50%的硫酸溶液中.再加入多少千克浓度为5%的硫酸溶液,就可以配制成浓度为25%的硫酸溶液?求算示,过程. 装修 中山 500号水泥,沙子,红砖.一级白灰的价格大概是多少? She's a good girl 变复数 用碎砖的三合土配合比是怎样,一立方要多少石灰? 新房白灰墙面装修,想贴壁纸,要不要把白灰铲掉呢? 在100千克浓度为百分之50的硫酸溶液中,再加入多少千克浓度为百分之5的硫酸溶液,就可配置浓度百分之25硫酸溶液? 能不用方程就不用 石灰是由什么做成的?求大神帮助 若用98%用浓硫酸来配制500毫升20%的稀硫酸需用浓硫酸多少克? 一堆沙,运走了它的8分之3,正好剩下24吨,这堆沙有9( )吨.数量关系(文字表示)( ) 列式:( ) 石灰学名叫什么求大神帮助 写出下列单词的复数形式 1、this― 2、that― 3、he/she/it― 4、i― 5、is/am― 6、you― 7、friend―8、bus― 9、egg― 10、ruler― 11、pen― 12、book― 13、map― 14、apple― 15、cake― 16、teacher― 17、grade― 用文字好了 [2又3分之1+(5.4-3又3分之2)×1又3分之2]÷3又9分之4 石灰加水什么样
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn