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

本章任务 制作产品展示平台 制作加了效果的图片幻灯片 制作加上标注的图片幻灯片 制作图片幻灯片-1 制作图片幻灯片-2 实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementById( “图片的Id”)方法获取图片对象 2、使用数组保存图片名称。用循环改变数组的下表。从而改变图片的src 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 常见错误-1 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 ? 扩展: 如何将一个图片的幻灯片特效放到自己的网站上 示例原效果: 加上后的效果: 上机作业 再你的网站中需要多个图片轮流显示的。都加上 比如原来只是一张图片需要几张轮流显示，原来没有实现 比如，原来用flash实现的图片互换的效果，但flash太大。需要将其改成javascript代码 扩展： 给图片加上序号 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-4 制作图片幻灯片-3 制作图片幻灯片-3 加深 如何将网上漂亮的图片循环播放的例子加到自己的网站上 需要改 一、大小（图片播放所在层的大小要和你的网站中的大小一致） 二、颜色（图片播放所在层的颜色要和你的网站的主色调一致） 三、图片（显然例子中的图片不是你网站上需要的图片，将其换下） 四：图片所对应的超链接，再你的网站上点击图片应该连接到哪个位置 加深 再加深就是修改例子的源代码，改变特效的样式 简单示例： 上机作业 在我给的图片特效中找个你比较喜欢的，比较适合你的网站的，修改后将其加到你的网站中 div id=showing img id=img1 src=img/1.jpg onmouseover=restop() onmouseout=restart() / ul id=banners li id=banners_1 onmouseover=duiying(1) onmouseout=restart()1/li li id=banners_2 onmouseover=duiying(2) onmouseout=restart()2/li li id=banners_3 onmouseover=duiying(3) onmouseout=restart()3/li li id=banners_4 onmouseover=duiying(4) onmouseout=restart()4/li li id=banners_5 onmouseover=duiying(5) onmouseout=restart()5/li li id=banners_6 onmouseover=duiying(6) onmouseout=restart()6/li /ul /div 当鼠标离开li时开始正常的循环播放 调用相应的函数 演示示例1：图片幻灯片 演示示例2：加了效果的图片幻灯片 演示示例3：加上标注的图片幻灯片 如何在页面上方显示图片？如何控制图片的转换？ 使用DIV层，把图片放在层中，然后使用JavaScript控制图片的src script language=javascript i=0 function change() { document.getElementById(tp2).src=img/+i+.jpg; i++; ‘循环显示图片 if(i==5) { i=0 } } setInterval(change(),1000) /script 图片的名称为;0.jpg到4.jpg 当显示的图片是最后一张图片了，再重新还是循环 每隔1秒执行一次函数，换一张图片 图片的名称要有规律 上一张PPT中示例能实现图片互换，但要求图片的名称必须有规律而且最后是数字，如果图片的名称是没有规律的或不是数字的，怎么办？ 将图片的名称放到一个数组里面。循环数组的下标。 function change() { var srcarray=new Array(as.jpg,bg.jpg,ff.jpg,hh.jpg,dd.jpg,e.jpg,m.jpg); document.getElementById(tp2)..src=srcarray[i]; i++; if(i==srcarray.le