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

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

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

3、ray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg); document.getElementById(tp2).src=srcarrayi; i+; if(i=srcarray.length) i=0; setInterval(change(),1000); 好处：图片的名称可以使随意的，不用是数字,当显示的图片是最后一张图片了，再重新还是循环,每隔1秒执行一次函数，换一张图片,图片的名称保存在数组内,制作图片幻灯片-4,上一张PPT中示例能实现图片互换，但图片是按照在数组中定义的顺序显示的，如果我想随机的显示，不分顺序。

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

5、-4,直接在JavaScript中写setInterval()代码，可以实现图片的互换，但如何实现将鼠标放上去时就停止呢,使用OnmouseOver()事件，调用停止循环的函数 clearInterval(timeid);,制作图片幻灯片-3,function restop() clearInterval(timeid); ,当鼠标放上去的时候停止,停止循环的函数,制作图片幻灯片-4,上张PPT实现了将鼠标放上去时就停止，但发现鼠标离开时还是停止的，如何实现鼠标离开时，再开始循环？,使用OnmouseOut()事件，调用开始循环的函数 timeid=setInterval(start(),10

6、00);,制作图片幻灯片-3,function restart() timeid=setInterval(start(),1000); function restop() clearInterval(timeid); ,重新开始循环的函数,停止循环的函数,鼠标放上去停止，鼠标离开时开始,常见错误-1,function restart() timeid=setInterval(start(),1000); function restop() clearInterval(timeid); ,刚开始有学生定义start()函数，然后调用，会出现错误，原因start为JavaScript的保留字,制作

7、图片幻灯片-4,以上将要实现的效果基本上完整了，但如何实现网站中换图片时有效果呢？不是单纯的把图片换了,用CSS中的滤镜来实现,制作图片幻灯片-3, img filter:RevealTrans(Duration=3,Transition=21); border:none; ,定义图片的滤镜，,制作图片幻灯片-3, var 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()*sr

8、carray.length) tp2.src=img/+srcarrayi; tp2.filters0.play(); setInterval(change(),1000) ,图片开始加载滤镜,播放滤镜,制作图片幻灯片-4,上面的示例实现了图片互换时只能有一种效果，如果我想要多种效果怎么办？,则效果是由滤镜的Transition的值控制的，所以用JavaScript控制滤镜的Transition的值,制作图片幻灯片-3, var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg); function change

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

10、不同的代码,制作图片幻灯片-3, if(navigator.userAgent.indexOf(MSIE)!=-1) function aa() tp2.filters0.apply(); i=Math.floor(Math.random()*5) tp2.src=img/+i+.jpg; tp2.filters0.Transition=i tp2.filters0.play(); else if(navigator.userAgent.indexOf(Firefox)!=-1) function aa() i=Math.floor(Math.random()*5) tp2.src=img/+

11、i+.jpg; ,如果浏览器为火狐,如果浏览器为IE,?,扩展: 如何将一个图片的幻灯片特效放到自己的网站上 示例原效果: 加上后的效果:,上机作业,再你的网站中需要多个图片轮流显示的。都加上 比如原来只是一张图片需要几张轮流显示，原来没有实现 比如，原来用flash实现的图片互换的效果，但flash太大。需要将其改成javascript代码,扩展：,给图片加上序号,制作图片幻灯片-4,标签用什么技术实现？,用层，或是无序列表,制作图片幻灯片-3, 1 2 3 4 5 6 ,使用无序列表,制作图片幻灯片-4,标签如何跟图片对应起来,当显示第一张图片时，将第一个列表的背景色变色 document

12、.getElementById(lid).style.background=red,制作图片幻灯片-3,function change() img1.filters0.apply(); img1.filters(0).Transition=i img1.src=images/+srcarrayi; img1.filters0.play(); lid=banners_+i document.getElementById(lid).style.background=red i=i+1 if(i6) i=1 ,将对应的li的背景色，设置红色,设置li的id，id跟数组的下标对应，数组的下标跟图片对应

13、，,制作图片幻灯片-4,从上面的代码演示结果，前面的li的背景色变成红色后，就不变回来了，最后所有的列表都变为红色。不符合要求怎么办？,在一个列表的背景色变成红色时，其余的都应变回原来的颜色。,制作图片幻灯片-3,change()函数中将 document.getElementById(lid).style.background=red lid=banners_+i 改为 for(m=1;m=6;m+) lid=banners_+m if(m=i) document.getElementById(lid).style.background=red else document.getElemen

14、tById(lid).style.background=#FF66FF ,其余的还为原来的颜色,将当前的li的背景色设置成红色（注意m和 i的值是对应的）,制作图片幻灯片-4,如何实现鼠标点击哪个标签，就显示相对应的图片,在每个li的Onmouseover事件调用函数，改变图片的src,制作图片幻灯片-3,function duiying(x) clearInterval(timeid) img1.src=images/+srcarrayx; for(m=1;m=6;m+) lid=banners_+m if(m=x) document.getElementById(lid).style.background=red else document.getElementById(lid).style.background=#FF66FF ,同样需要修改li的背景颜色,和后面的事件想对应，让其显示哪张图片,将原来的鼠标离开图片就循环的这个循环清除，否则跟下面要实现的功能相冲突,制作图片幻灯片-3, 1 2 3 4 5 6 ,当鼠标离开li时开始正常的循环播放,调用相应的函数,