《使用javascript制作图片幻灯片详细讲义》由会员分享，可在线阅读，更多相关《使用javascript制作图片幻灯片详细讲义（35页珍藏版）》请在金锄头文库上搜索。
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() v
3、ar 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中示例能实现图片互换，但图片是按照在数组中定义的顺序显示的，如果我想
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=setIn
6、terval(“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()函数，然后调用，会出现错误，原因
7、start为JavaScript的保留字,制作图片幻灯片-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
8、.floor(Math.random()*srcarray.length) tp2src=“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.j
9、pg,m.jpg); function change() tp2.filters0.apply(); i=Math.floor(Math.random()*srcarray.length) tp2src=“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
11、.floor(Math.random()*5) tp2.src=“img/“+i+“.jpg“; ,如果浏览器为火狐,如果浏览器为IE,?,扩展: 如何将一个图片的幻灯片特效放到自己的网站上 示例原效果: 加上后的效果:,上机作业,再你的网站中需要多个图片轮流显示的。都加上 比如原来只是一张图片需要几张轮流显示，原来没有实现 比如，原来用flash实现的图片互换的效果，但flash太大。需要将其改成javascript代码,扩展：,给图片加上序号,制作图片幻灯片-4,标签用什么技术实现？,用层，或是无序列表,制作图片幻灯片-3, 1 2 3 4 5 6 ,使用无序列表,制作图片幻灯片-4,标签
12、如何跟图片对应起来,当显示第一张图片时，将第一个列表的背景色变色 document.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
13、=1 ,将对应的li的背景色，设置红色,设置li的id，id跟数组的下标对应，数组的下标跟图片对应，,制作图片幻灯片-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.getElemen
14、tById(lid).style.background=“red“ else document.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+)
15、 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时开始正常的循环播放,调用相应的函数,加深,如何将网上漂亮的图片循环播放的例子加到自己的网站上 需要改 一、大小（图片播放所在层的大小要和你的网站中的大小一致） 二、颜色（图片播放所在层的颜色要和你的网站的主色调一致） 三、图片（显然例子中的图片不是你网站上需要的图片，将其换下） 四：图片所对应的超链接，再你的网站上点击图片应该连接到哪个位置,加深,再加深就是修改例子的源代码，改变特效的样式 简单示例：,上机作业,在我给的图片特效中找个你比较喜欢的，比较适合你的网站的，修改后将其加到你的网站中,
