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

1、本章任务本章任务 演示示例演示示例1 1：图片幻灯片图片幻灯片 演示示例演示示例2 2：加了效果的图片幻灯片加了效果的图片幻灯片 演示示例演示示例3 3：加上标注的图片幻灯片加上标注的图片幻灯片n制作制作产品展示平台产品展示平台n 制作制作加了效果的图片幻灯片n 制作制作加上标注的图片幻灯片制作制作图片幻灯片图片幻灯片-1如何在页面上方显示图片？如何控制图片的如何在页面上方显示图片？如何控制图片的转换转换？使用使用DIV层，把图片放在层中，然后使用层，把图片放在层中，然后使用JavaScript控制控制图片的图片的src制作制作图片幻灯片图片幻灯片-2n实现思路：实现思路：在页面中插入层，然后

2、在层中插入图片在页面中插入层，然后在层中插入图片编写脚本编写脚本1、使用getElementById( “图片的Id”)方法获取图片对象2、使用数组保存图片名称。用循环改变数组的下表。从而改变图片的src制作制作图片幻灯片图片幻灯片-3i=0i=0function function change() document.getElementById(tp2).src=img/+i+.jpg;i+;i+;循环显示图片循环显示图片if(i=5)if(i=5) i=0i=0 setInterval(setInterval(change(),1000),1000)图片的名称为;0.jpg到4.jpg当显

3、示的图片是最后当显示的图片是最后一张图片了，再重新一张图片了，再重新还是循环还是循环每隔每隔1秒执行一次函秒执行一次函数，换一张图片数，换一张图片图片的名称要有规图片的名称要有规律律制作制作图片幻灯片图片幻灯片-4上一张上一张PPT中示例能实现中示例能实现图片互换图片互换，但，但要求要求图片图片的名称必的名称必须有规律而且最后是数字，如果图片的名称是没有规律的须有规律而且最后是数字，如果图片的名称是没有规律的或不是数字的或不是数字的，怎么办？，怎么办？将图片的名称放到一个数组里面。循环数组的下标。将图片的名称放到一个数组里面。循环数组的下标。制作制作图片幻灯片图片幻灯片-3function c

4、hange()function change() var srcarray=new var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpArray(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);g,m.jpg);document.getElementById(tp2).src=srcarrayi;.src=srcarrayi;i+;i+;if(i=srcarray.length) i=0;i=0; setInterval(change(),1000);setInterval

5、(change(),1000);好处：图片的名称可以使随意的，不用是数字当显示的图片是最后当显示的图片是最后一张图片了，再重新一张图片了，再重新还是循环还是循环每隔每隔1秒执行一次函秒执行一次函数，换一张图片数，换一张图片图片的名称保存在图片的名称保存在数组内数组内制作制作图片幻灯片图片幻灯片-4上一张上一张PPT中示例能实现中示例能实现图片互换图片互换，但，但图片是按照在数组图片是按照在数组中定义的顺序显示的中定义的顺序显示的，如果我想随机的显示，不分顺序。如果我想随机的显示，不分顺序。怎么办？怎么办？用随机数表示，随机数的范围是用随机数表示，随机数的范围是0 0到数组的大小到数组的大小制作

6、制作图片幻灯片图片幻灯片-3var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);function function change() 为为0 0到到4 4的任意一个整数的任意一个整数i=Math.floor(Math.random()*srcarray.length)document.getElementById(tp2).src=img/+srcarrayi; setInterval(setInterval(change(),1000),1000)随机数随机数的的范围是数组范围是数组的大小的大小图片的图

7、片的src为下标是为下标是随机数的数组的值随机数的数组的值制作制作图片幻灯片图片幻灯片-4直接在直接在JavaScript中写中写setInterval()代码，可以实现图片代码，可以实现图片的互换，但如何实现将鼠标放上去时就停止呢的互换，但如何实现将鼠标放上去时就停止呢使用使用OnmouseOver()OnmouseOver()事件，调用停止循环的函数事件，调用停止循环的函数clearInterval(timeid);制作制作图片幻灯片图片幻灯片-3function restop()function restop() clearInterval(timeid); img id=img1 sr

8、c=img/1.jpg 当鼠标放上去的时候当鼠标放上去的时候停止停止停止循环的函数停止循环的函数制作制作图片幻灯片图片幻灯片-4上张上张PPT实现了将鼠标放上去时就停止，但发现鼠标离开实现了将鼠标放上去时就停止，但发现鼠标离开时还是停止的，如何实现鼠标离开时，再开始循环？时还是停止的，如何实现鼠标离开时，再开始循环？使用使用OnmouseOut()OnmouseOut()事件，调用开始循环的函数事件，调用开始循环的函数timeid=setInterval(start(),1000);制作制作图片幻灯片图片幻灯片-3function restart()function restart() tim

9、eid=setInterval(start(),1000); function restop()function restop() clearInterval(timeid); 重新开始循环的函重新开始循环的函数数停止循环的函数停止循环的函数鼠标放上去停止，鼠标离开鼠标放上去停止，鼠标离开时开始时开始常见错误常见错误-1nfunction restart()nntimeid=setInterval(start(),1000);nnfunction restop()nnclearInterval(timeid);n刚开始有学生定义刚开始有学生定义start()函数，然后调用，会出现函数，然后调用

10、，会出现错误，原因错误，原因start为为JavaScript的保留字的保留字制作制作图片幻灯片图片幻灯片-4以上将要实现的效果基本上完整了，但如何实现网站中换以上将要实现的效果基本上完整了，但如何实现网站中换图片时有效果呢？不是单纯的把图片换了图片时有效果呢？不是单纯的把图片换了用用CSSCSS中的滤镜来实现中的滤镜来实现制作制作图片幻灯片图片幻灯片-3imgimgfilter:RevealTrans(Duration=3,filter:RevealTrans(Duration=3,Transition=21););border:none;border:none; 定义图片的滤镜，定义图片的

11、滤镜，制作制作图片幻灯片图片幻灯片-3var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);function change()tp2.filters0.apply();i=Math.floor(Math.random()*srcarray.length)tp2.src=img/+srcarrayi;tp2.filters0.play();setInterval(change(),1000)图片开始加载滤镜图片开始加载滤镜播放滤镜播放滤镜制作制作图片幻灯片图片幻灯片-4上面的示例实现了图片互换时只能有一种效果

12、，如果我想上面的示例实现了图片互换时只能有一种效果，如果我想要多种效果怎么办？要多种效果怎么办？则则效果是由滤镜的效果是由滤镜的Transition的值控制的，所以用JavaScript控制滤镜的滤镜的Transition的值制作制作图片幻灯片图片幻灯片-3var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg);function change()tp2.filters0.apply();i=Math.floor(Math.random()*srcarray.length)tp2.src=img/+srcarr

13、ayi;tp2.filters0. Transition=itp2.filters0.play();setInterval(change(),1000)改变改变Transition的值，就是改变效果制作制作图片幻灯片图片幻灯片-4整个的代码在火狐整个的代码在火狐浏览器内浏览器内没有任何效果没有任何效果，如果用户用的，如果用户用的是火狐浏览器怎么办？是火狐浏览器怎么办？Css滤镜是微软的东西，只有滤镜是微软的东西，只有IE浏览器支持，但火狐不支浏览器支持，但火狐不支持但在火狐内可以实现图片互换的效果持但在火狐内可以实现图片互换的效果，再火狐中不使用，再火狐中不使用滤镜判断游览器类型执行不同的代码

14、滤镜判断游览器类型执行不同的代码制作制作图片幻灯片图片幻灯片-3if(navigator.userAgent.indexOf(MSIE)!=-1)function aa()tp2.filters0.apply();i=Math.floor(Math.random()*5)tp2.src=img/+i+.jpg;tp2.filters0.Transition=itp2.filters0.play();else if(navigator.userAgent.indexOf(Firefox)!=-1)function aa()i=Math.floor(Math.random()*5)tp2.src=

15、img/+i+.jpg;如果浏览器为火狐如果浏览器为火狐如果浏览器为如果浏览器为IE?n扩展扩展:n如何将一个图片的幻灯片特效放到自己的网站上如何将一个图片的幻灯片特效放到自己的网站上n示例原效果示例原效果:n加上后的效果加上后的效果:上机作业上机作业n再你的网站中需要多个图片轮流显示的。都加上再你的网站中需要多个图片轮流显示的。都加上n比如原来只是一张图片需要几张轮流显示，原来比如原来只是一张图片需要几张轮流显示，原来没有实现没有实现n比如，原来用比如，原来用flash实现的图片互换的效果，但实现的图片互换的效果，但flash太大。需要将其改成太大。需要将其改成javascript代码代码扩

16、展：扩展：n给图片加上序号给图片加上序号制作制作图片幻灯片图片幻灯片-4标签用什么技术实现？标签用什么技术实现？用层，或是无序列表用层，或是无序列表制作制作图片幻灯片图片幻灯片-3 1 2 3 4 5 6使用无序列表使用无序列表制作制作图片幻灯片图片幻灯片-4标签如何跟图片对应起来标签如何跟图片对应起来当显示第一张图片时，将第一个列表的背景色变色当显示第一张图片时，将第一个列表的背景色变色document.getElementById(lid).style.background=red制作制作图片幻灯片图片幻灯片-3function change()img1.filters0.apply();

17、img1.filters(0).Transition=iimg1.src=images/+srcarrayi;img1.filters0.play();lid=banners_+idocument.getElementById(lid).style.background=redi=i+1if(i6)i=1将对应的将对应的li的背景色，的背景色，设置红色设置红色设置设置li的的id，id跟数组的跟数组的下标对应，数组的下标跟下标对应，数组的下标跟图片对应图片对应，制作制作图片幻灯片图片幻灯片-4从上面的代码演示结果，前面的从上面的代码演示结果，前面的li的背景色变成红色后，就的背景色变成红色后，

18、就不变回来了，最后所有的列表都变为红色。不符合要求怎不变回来了，最后所有的列表都变为红色。不符合要求怎么办？么办？在一个列表的背景色变成红色时，其余的都应变回原来的颜色。制作制作图片幻灯片图片幻灯片-3change()函数中将函数中将document.getElementById(lid).style.background=redlid=banners_+i改为改为for(m=1;m=6;m+)lid=banners_+mif(m=i)document.getElementById(lid).style.background=redelsedocument.getElementById(lid

19、).style.background=#FF66FF其余的还为原来的颜色其余的还为原来的颜色将当前的将当前的li的背景色设置成红的背景色设置成红色（注意色（注意m和和 i的值是对应的）的值是对应的）制作制作图片幻灯片图片幻灯片-4如何实现鼠标点击哪个标签，就显示相对应的图片如何实现鼠标点击哪个标签，就显示相对应的图片在每个在每个li的的Onmouseover事件调用函数，改变图片的事件调用函数，改变图片的src制作制作图片幻灯片图片幻灯片-3function duiying(x)clearInterval(timeid)img1.src=images/+srcarrayx;for(m=1;m=6;m+)lid=banners_+mif(m=x)document.getElementById(lid).style.background=redelsedocument.getElementById(lid).style.background=#FF66FF同样需