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

本章任务演示示例1：图片幻灯片演示示例2：加了效果的图片幻灯片演示示例3：加上标注的图片幻灯片制作产品展示平台制作加了效果的图片幻灯片制作加上标注的图片幻灯片制作图片幻灯片-1如何在页面上方显示图片？如何控制图片的转换？使用DIV层，把图片放在层中，然后使用JavaScript控制图片的src制作图片幻灯片-2实现思路：在页面中插入层，然后在层中插入图片编写脚本1、使用getElementById(“图片的Id”)方法获取图片对象2、使用数组保存图片名称。用循环改变数组的下表。从而改变图片的src制作图片幻灯片-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秒执行一次函数，换一张图片图片的名称要有规律制作图片幻灯片-4上一张PPT中示例能实现图片互换，但要求图片的名称必须有规律而且最后是数字，如果图片的名称是没有规律的或不是数字的，怎么办？将图片的名称放到一个数组里面。循环数组的下标。制作图片幻灯片-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秒执行一次函数，换一张图片图片的名称保存在数组内制作图片幻灯片-4上一张PPT中示例能实现图片互换，但图片是按照在数组中定义的顺序显示的，如果我想随机的显示，不分顺序。怎么办？用随机数表示，随机数的范围是0到数组的大小制作图片幻灯片-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为下标是随机数的数组的值制作图片幻灯片-4直接在JavaScript中写setInterval()代码，可以实现图片的互换，但如何实现将鼠标放上去时就停止呢使用OnmouseOver()事件，调用停止循环的函数clearInterval(timeid);制作图片幻灯片-3functionrestop(){clearInterval(timeid);}divid=showimgimgid=img1src=img/1.jpgonMouseOver=restop()//div当鼠标放上去的时候停止停止循环的函数制作图片幻灯片-4上张PPT实现了将鼠标放上去时就停止，但发现鼠标离开时还是停止的，如何实现鼠标离开时，再开始循环？使用OnmouseOut()事件，调用开始循环的函数timeid=setInterval(start(),1000);制作图片幻灯片-3functionrestart(){timeid=setInterval(start(),1000);}functionrestop(){clearInterval(timeid);}divid=showimgimgid=img1src=img/1.jpgonMouseOver=restop()onMouseOut=restart()//div重新开始循环的函数停止循环的函数鼠标放上去停止，鼠标离开时开始常见错误-1functionrestart(){timeid=setInterval(start(),1000);}functionrestop(){clearInterval(timeid);}刚开始有学生定义start()函数，然后调用，会出现错误，原因start为JavaScript的保留字制作图片幻灯片-4以上将要实现的效果基本上完整了，但如何实现网站中换图片时有效果呢？不是单纯的把图片换了用CSS中的滤镜来实现制作图片幻灯片-3styletype=text/cssimg{filter:RevealTrans(Duration=3,Transition=21);border:none;}/styledivid=showimgimgid=img1src=img/1.jpgonMouseOver=restop()onMouseOut=restart()//div定义图片的滤镜，制作图片幻灯片-3scriptlanguage=javascriptvarsrcarray=newArray('as.jpg','bg.jpg','ff.jpg','hh.jpg','dd.jpg','e.jpg','m.jpg');functionchange(){tp2.filters[0].apply();i=Math.floor(Math.random()*srcarray.length)tp2..src=img/+srcarray[i];tp2.filters[0].play();}setInterval(change(),1000)/script图片开始加载滤镜播放滤镜制作图片幻灯片-4上面的示例实现了图片互换时只能有一种效果，如果我想要多种效果怎么办？则效果是由滤镜的Transition的值控制的，所以用JavaScript控制滤镜的Transition的值制作图片幻灯片-3scriptlanguage=javascriptvarsrcarray=newArray('as.jpg','bg.jpg','ff.jpg','hh.jpg','dd.jpg','e.jpg','m.jpg');functionchange(){tp2.filters[0].apply();i=Math.floor(Math.random()*srcarray.length)tp2..src=img/+srcarray[i];tp2.filters[0].Transition=itp2.filters[0].play();}setInterval(change(),1000)/script改变Transition的值，就是改变效果制作图片幻灯片-4整个的代码在火狐浏览器内没有任何效果，如果用户用的是火狐浏览器怎么办？Css滤镜是微软的东西，只有IE浏览器支持，但火狐不支持但在火狐内可以实现图片互换的效果，再火狐中不使用滤镜判断游览器类型执行不同的代码制作图片幻灯片-3scriptlanguage=javascriptif(navigator.userAgent.indexOf(MSIE)!=-1){functionaa(){tp2.filters[0].apply();i=Math.floor(Math.random()*5)tp2.src=img/+i+.jpg;tp2.filters[0].Transition=itp2.filters[0].play();}}elseif(navigator.userAgent.indexOf(Firefox)!=-1){functionaa(){i=Math.floor(Math.random()*5)tp2.src=img/+i+.jpg;}}如果浏览器为火狐如果浏览器为IE?扩展:如何将一个图片的幻灯片特效放到自己的网站上示例原效果:加上后的效果:上机作业再你的网站中需要多个图片轮流显示的。都加上比如原来只是一张图片需要几张轮流显示，原来没有实现比如，原来用flash实现的图片互换的效果，但flash太大。需要将其改成javascript代码扩展：给图片加上序号制作图片幻灯片-4标签用什么技术实现？用层，或是无序列表制作图片幻灯片-3bodydivid=showingimgid=img1src=img/1.jpg/ulid=bannersliid=banners_11/liliid=banners_22/liliid=banners_33/liliid=banners_44/liliid=banners_55/liliid=banners_66/li/ul/div/body使用无序列表制作图片幻灯片-4标签如何跟图片对应起来当显示第一张图片时，将第一个列表的背景色变色document.getElementById(lid).style.background=red制作图片幻灯片-3functionchange(){img1.filters[0].apply();img1.filters(0).Transition=iimg1.src=images/+srcarray[i];img1.filters[0].play();lid=banners_+idocument.getElementById(lid).style.background=redi=i+1if(i6){i=1}}将对应的li的背景色，设置红色设置li的id，id跟数组的下标对应，数组的下标跟图片对应，制作图片幻灯片-4从上面的代码演示结果，前面的li的背景色变成红色后，就不变回来了，最后所有的列表都变为红色。不符合要求怎么办？在一个列表的背景色变成红色时，其余的都应变回原来的颜色。制作图片幻灯片-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=red}else{document.getElementById(lid).style.background=#FF66FF}}其余的还为原来的颜色将当前的li的背景色设置成红色（注意m和i的值是对应的）制作图片幻灯片-4如何实现鼠标点击哪个标签，就显示相对应的图片在每个li的Onmouseover事件调用函数，改变图片的src制作图片幻灯片-3functionduiying(x){clearInterval(timeid)img1.src=images/+srcarray[x];for(m=1;m=6;m++){lid=banners_+mif(m==x){document.getElementById(lid).style.background=red}else{document.getElementById(lid).style.background=#FF66FF}}}同样需要修改li的背景颜色和后面的事件想对应，让其显示哪张图片将原来的鼠标离开图片就循环的这个循环清除，否则跟下面要实现的功能相冲突制作图片幻灯片-3divid=showingimgid=img1src=img/1.jpgonmouseover=restop()onmouseout=res