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

本章任务,演示示例1：图片幻灯片,演示示例2：加了效果的图片幻灯片,演示示例3：加上标注的图片幻灯片,制作产品展示平台 制作加了效果的图片幻灯片 制作加上标注的图片幻灯片,制作图片幻灯片-1,如何在页面上方显示图片？如何控制图片的转换？,使用DIV层，把图片放在层中，然后使用JavaScript控制图片的src,制作图片幻灯片-2,实现思路：在页面中插入层，然后在层中插入图片编写脚本1、使用getElementById(“图片的Id”)方法获取图片对象2、使用数组保存图片名称。用循环改变数组的下表。从而改变图片的src,制作图片幻灯片-3,i=0function change()document.getElementById(tp2).src=img/+i+.jpg;i+;循环显示图片if(i=5)i=0setInterval(change(),1000)图片的名称为;0.jpg到4.jpg,当显示的图片是最后一张图片了，再重新还是循环,每隔1秒执行一次函数，换一张图片,图片的名称要有规律,制作图片幻灯片-4,上一张PPT中示例能实现图片互换，但要求图片的名称必须有规律而且最后是数字，如果图片的名称是没有规律的或不是数字的，怎么办？,将图片的名称放到一个数组里面。循环数组的下标。,制作图片幻灯片-3,function change()var srcarray=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中示例能实现图片互换，但图片是按照在数组中定义的顺序显示的，如果我想随机的显示，不分顺序。怎么办？,用随机数表示，随机数的范围是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为下标是随机数的数组的值,制作图片幻灯片-4,直接在JavaScript中写setInterval()代码，可以实现图片的互换，但如何实现将鼠标放上去时就停止呢,使用OnmouseOver()事件，调用停止循环的函数clearInterval(timeid);,制作图片幻灯片-3,function restop()clearInterval(timeid);,当鼠标放上去的时候停止,停止循环的函数,制作图片幻灯片-4,上张PPT实现了将鼠标放上去时就停止，但发现鼠标离开时还是停止的，如何实现鼠标离开时，再开始循环？,使用OnmouseOut()事件，调用开始循环的函数timeid=setInterval(start(),1000);,制作图片幻灯片-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的保留字,制作图片幻灯片-4,以上将要实现的效果基本上完整了，但如何实现网站中换图片时有效果呢？不是单纯的把图片换了,用CSS中的滤镜来实现,制作图片幻灯片-3,imgfilter: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()*srcarray.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()tp2.filters0.apply();i=Math.floor(Math.random()*srcarray.length)tp2.src=img/+srcarrayi;tp2.filters0.Transition=itp2.filters0.play();setInterval(change(),1000),改变Transition的值，就是改变效果,制作图片幻灯片-4,整个的代码在火狐浏览器内没有任何效果，如果用户用的是火狐浏览器怎么办？,Css滤镜是微软的东西，只有IE浏览器支持，但火狐不支持但在火狐内可以实现图片互换的效果，再火狐中不使用滤镜判断游览器类型执行不同的代码,制作图片幻灯片-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=itp2.filters0.play();else if(navigator.userAgent.indexOf(Firefox)!=-1)function aa()i=Math.floor(Math.random()*5)tp2.src=img/+i+.jpg;,如果浏览器为火狐,如果浏览器为IE,?,扩展:如何将一个图片的幻灯片特效放到自己的网站上示例原效果:加上后的效果:,上机作业,再你的网站中需要多个图片轮流显示的。都加上比如原来只是一张图片需要几张轮流显示，原来没有实现比如，原来用flash实现的图片互换的效果，但flash太大。需要将其改成javascript代码,扩展：,给图片加上序号,制作图片幻灯片-4,标签用什么技术实现？,用层，或是无序列表,制作图片幻灯片-3,1 2 3 4 5 6,使用无序列表,制作图片幻灯片-4,标签如何跟图片对应起来,当显示第一张图片时，将第一个列表的背景色变色document.getElementById(lid).style.background=red,制作图片幻灯片-3,function change()img1.filters0.apply();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的背景色变成红色后，就不变回来了，最后所有的列表都变为红色。不符合要求怎么办？,在一个列表的背景色变成红色时，其余的都应变回原来的颜色。,制作图片幻灯片-3,change()函数中将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).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_+mif(m=x)document.getElementById(lid).style.background=redelsedocument.getElementById(lid).style.background=#FF66FF,同样需要修改li的背景颜色,和后面的事件想对应，让其显示哪张图片,将原来的鼠标离开图片就循环的这个循环清除，否则跟下面要实现的功能相冲突,制作图片幻灯片-3,1 2 3 4 5 6,当鼠标离开li时开始正常的循环播放,调用相应的函数,加深,如何将网上漂亮的图片循环播放的例子加到自己的网站上需要改一、大小（图片播放所在层的大小要和你的网站中的大小一致）二、颜色（图片播放所在层的颜色要和你的网站的主色调一致）三、图片（显然例子中的图片不是你网站上需要的图片，将其换下）四：图片所对应的超链接，再你的网站上点击图片应该连接到哪个位置,加深,再加深就是修改例子的源代码，改变特效的样式简单示例：,上机作业,在我给的图片特效中找个你比较喜欢的，比较适合你的网站的，修改后将其加到你的网站中,