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

本章任务演示示例1：图片幻灯片演示示例2：加了效果的图片幻灯片演示示例3：加上标注的图片幻灯片制作产品展示平台制作加了效果的图片幻灯片制作加上标注的图片幻灯片01如何在页面上方显示图片？如何控制图片的转换？使用DIV层，把图片放在层中，然后使用JavaScript控制图片的src02制作图片幻灯片-1在页面中插入层，然后在层中插入图片编写脚本使用getElementById(“图片的Id”)方法获取图片对象使用数组保存图片名称。用循环改变数组的下表。从而改变图片的src实现思路：制作图片幻灯片-2制作图片幻灯片-3scriptlanguage=javascripti=0functionchange(){document.getElementById(tp2).src=img/+i+.jpg;i++;‘循环显示图片if(i==5) { i=0 }}setInterval(change(),1000)/script图片的名称为;0.jpg到4.jpg当显示的图片是最后一张图片了，再重新还是循环每隔1秒执行一次函数，换一张图片图片的名称要有规律上一张PPT中示例能实现图片互换，但要求图片的名称必须有规律而且最后是数字，如果图片的名称是没有规律的或不是数字的，怎么办？1将图片的名称放到一个数组里面。循环数组的下标。2制作图片幻灯片-4制作图片幻灯片-3functionchange(){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秒执行一次函数，换一张图片图片的名称保存在数组内上一张PPT中示例能实现图片互换，但图片是按照在数组中定义的顺序显示的，如果我想随机的显示，不分顺序。怎么办？1用随机数表示，随机数的范围是0到数组的大小2制作图片幻灯片-4制作图片幻灯片-3scriptlanguage=javascriptvarsrcarray=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];}setInterval(change(),1000)/script随机数的范围是数组的大小图片的src为下标是随机数的数组的值01直接在JavaScript中写setInterval()代码，可以实现图片的互换，但如何实现将鼠标放上去时就停止呢02使用OnmouseOver()事件，调用停止循环的函数clearInterval(timeid);制作图片幻灯片-4制作图片幻灯片-3functionrestop(){clearInterval(timeid);}divid=showimgimgid=img1src=img/1.jpgonMouseOver=restop()//div当鼠标放上去的时候停止停止循环的函数上张PPT实现了将鼠标放上去时就停止，但发现鼠标离开时还是停止的，如何实现鼠标离开时，再开始循环？使用OnmouseOut()事件，调用开始循环的函数timeid=setInterval(start(),1000);制作图片幻灯片-4制作图片幻灯片-3functionrestart(){timeid=setInterval(start(),1000);}functionrestop(){clearInterval(timeid);}divid=showimgimgid=img1src=img/1.jpgonMouseOver=restop()onMouseOut=restart()//div重新开始循环的函数停止循环的函数鼠标放上去停止，鼠标离开时开始常见错误-1functionresta