使用JavaScript制作图片幻灯片详细

使用JavaScript制作图片幻灯片详细

ID:43428906

大小:568.50 KB

页数:35页

时间:2019-10-08

使用JavaScript制作图片幻灯片详细_第1页
使用JavaScript制作图片幻灯片详细_第2页
使用JavaScript制作图片幻灯片详细_第3页
使用JavaScript制作图片幻灯片详细_第4页
使用JavaScript制作图片幻灯片详细_第5页
资源描述:

《使用JavaScript制作图片幻灯片详细》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、本章任务演示示例1:图片幻灯片演示示例2:加了效果的图片幻灯片演示示例3:加上标注的图片幻灯片制作产品展示平台制作加了效果的图片幻灯片制作加上标注的图片幻灯片制作图片幻灯片-1如何在页面上方显示图片?如何控制图片的转换?使用DIV层,把图片放在层中,然后使用JavaScript控制图片的src制作图片幻灯片-2实现思路:在页面中插入层,然后在层中插入图片编写脚本1、使用getElementById(“图片的Id”)方法获取图片对象2、使用数组保存图片名称。用循环改变数组的下表。从而改变图片的src制作图片幻灯片-3i=0function

2、change(){document.getElementById("tp2").src="img/"+i+".jpg";i++;‘循环显示图片if(i==5){i=0}}setInterval("change()",1000)图片的名称为;0.jpg到4.jpg当显示的图片是最后一张图片了,再重新还是循环每隔1秒执行一次函数,换一张图片图片的名称要有规律制作图片幻灯片-4上一张PPT中示例能实现图片互换,但要求图片的名称必须有规律而且最后是数字,如果图片的名称是没有规律的或不是数字的,怎么办?将图片的名称放到一个数组里面。循环数组的下标。制作图片幻灯片-3functionch

3、ange(){varsrcarray=newArray('as.jpg','bg.jpg','ff.jpg','hh.jpg','dd.jpg','e.jpg','m.jpg');document.getElementById("tp2")..src=srcarray[i];i++;if(i==srcarray.length){i=0;}}setInterval("change()",1000);好处:图片的名称可以使随意的,不用是数字当显示的图片是最后一张图片了,再重新还是循环每隔1秒执行一次函数,换一张图片图片的名称保存在数组内制作图片幻灯片-4上一张PPT中示例能实现图片互换,但图片是按

4、照在数组中定义的顺序显示的,如果我想随机的显示,不分顺序。怎么办?用随机数表示,随机数的范围是0到数组的大小制作图片幻灯片-3varsrcarray=newArray('as.jpg','bg.jpg','ff.jpg','hh.jpg','dd.jpg','e.jpg','m.jpg');functionchange(){’为0到4的任意一个整数i=Math.floor(Math.random()*srcarray.length)document.getElementById("tp2").src="img/"+srcarray[i]

5、;}setInterval("change()",1000)随机数的范围是数组的大小图片的src为下标是随机数的数组的值制作图片幻灯片-4直接在JavaScript中写setInterval()代码,可以实现图片的互换,但如何实现将鼠标放上去时就停止呢使用OnmouseOver()事件,调用停止循环的函数clearInterval(timeid);制作图片幻灯片-3functionrestop(){clearInterval(timeid);}

6、/>

当鼠标放上去的时候停止停止循环的函数制作图片幻灯片-4上张PPT实现了将鼠标放上去时就停止,但发现鼠标离开时还是停止的,如何实现鼠标离开时,再开始循环?使用OnmouseOut()事件,调用开始循环的函数timeid=setInterval("start()",1000);制作图片幻灯片-3functionrestart(){timeid=setInterval("start()",1000);}functionrestop(){clearInterval(timeid);}

7、Over="restop()"onMouseOut="restart()"/>

重新开始循环的函数停止循环的函数鼠标放上去停止,鼠标离开时开始常见错误-1functionrestart(){timeid=setInterval("start()",1000);}functionrestop(){clearInterval(timeid);}刚开始有学生定义start()函数,然后调用,会

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。