欢迎来到天天文库
浏览记录
ID:43428906
大小:568.50 KB
页数:35页
时间:2019-10-08
《使用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、/>
6、/>
7、Over="restop()"onMouseOut="restart()"/>
此文档下载收益归作者所有