轮显图片制作_第1页
轮显图片制作_第2页
轮显图片制作_第3页
轮显图片制作_第4页
轮显图片制作_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、用js（javascript）+css或applet做的；不用什么软件。透明渐变轮番显示 制作方法： 在<head>标签下，粘贴代码：<script language="javascript">/ 设置轮番显示速度 set slideshowspeed (milliseconds)var slideshowspeed = 5000;/ 匀滑转换时间 duration of crossfade (seconds)var crossfadeduration = 3;/ 指定图像文件 specify the image filesvar pic = new

2、 array();/ to add more images, just continue/ the pattern, adding to the array belowpic0 = '1.jpg'pic1 = '2.jpg'pic2 = '3.jpg'pic3 = '4.jpg'pic4 = '5.jpg'/ do not edit anything below this linevar t;var j = 0;var p = pic.length;var preload = new array();for (i

3、= 0; i < p; i+) preload = new image();preload.src = pic;function runslideshow() if (document.all) document.images.slideshow.style.filter="blendtrans(duration=2)"document.images.slideshow.style.filter="blendtrans(duration=crossfadeduration)"document.images.slideshow.filters.ble

4、ndtrans.apply();document.images.slideshow.src = preloadj.src;if (document.all) document.images.slideshow.filters.blendtrans.play();j = j + 1;if (j > (p - 1) j = 0;t = settimeout('runslideshow()', slideshowspeed);</script> 修改body： <body bgcolor="#ffffff" text="#0000

5、00" onload="runslideshow()"> 将表格单元格设置名称“id=vu”： <td id=vu> 在<img>中加入代码：<img src="1.jpg" name='slideshow'> 至此，我们的效果便制作好了。 制作方法： 1. 在<head>中插入代码：<script language='javascript'>isns = navigator.appname = "netscape"/定义播放图

6、片张数img1=new image()img2=new image()img3=new image()img4=new image()img5=new image()/图片路径、文件名img1.src='images/circul-side.gif'img2.src='images/css-manual.gif'img3.src='images/kpt7.jpg'img4.src='images/msn.jpg'img5.src='images/ps-elsedocument.pic.visibility='vis

7、ible'tt=settimeout('change_img()',4000)</script> 可以在代码中按照中文介绍，修改相关信息。 2. 在<body>中加载：<body onload="change_img();"> 3. 插入第一张图片，并命名：id="pic" 插入代码：style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)' 参考图片代码： <img src="

8、images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'> 制作完成。观看效果使用css中的revealtrans滤镜制作超弦图片的播放css 中有revealtrans滤镜（具体介绍请参看巧用css的 revealtrans 滤镜），也曾用该滤镜制作过各种图片播

9、放的效果（类似于使用css滤镜revealtrans制作图片渐显效果）。知道其在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealtrans滤镜制作出超弦图片播放的效果。 实现思路：使用revealtrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。 制作方法： 1、在<head>中插入js代码：<script language=javascript1.2>function reapply()settimeout("slideit()",800)return truewindow.onerror=reapply<

10、/script><script language=javascript1.1><!-/preload imagesvar image1=new image()image1.src="images/01.jpg"var image2=new image()image2.src="images/02.jpg"var image3=new image()image3.src="images/03.jpg"var image4=new image()image4.src="images/04.jpg"

11、;var image5=new image()image5.src="images/05.jpg"var image6=new image()image6.src="images/06.jpg"var image7=new image()image7.src="images/07.jpg"var image8=new image()image8.src="images/08.jpg"var image9=new image()image9.src="images/09.jpg"/-><

12、;/script> 其中：images/big 完整代码：<img src="images/circul-side.gif" width="120" height="90" border="0" style="filter: revealtrans(duration=2, transition=23)" name=slide> 4、给图片加超链接：<a href="javascript :slidelink()"> 5、加入代码：<scri

13、pt><!-/change number of images belowvar number_of_images=9/change speed below (in seconds)var speed=3var step=1var whichimage=1function slideit()if (!document.images)returnif (document.all)slide.filters.item(0).apply()document.images.slide.src=eval("image"+step+".src")if (d

14、ocument.all)slide.filters.item(0).play()whichimage=stepif (step<number_of_images)step+elsestep=1if (document.all)settimeout("slideit()",speed*1000+3000)elsesettimeout("slideit()",speed*1000)function slidelink()if (whichimage=1)top.location.href="/index.html"if (which

15、image=2)top.location.href="/news.html"if (whichimage=3)top.location.href="/game.html"if (whichimage=4)top.location.href="/music.html"if (whichimage=5)top.location.href="/sport.html"if (whichimage=6)top.location.href="/radio.html"if (whichimage=7)top.

16、location.href="/travel.html"if (whichimage=8)top.location.href="/card.jsp"else if (whichimage=9)top.location.href="/study.html"</script> 其中：各链接地址相对应<head>中插入的js代码中的图片。 注意，页面地址必须与图片张数相对应。本教学使用九张图片，相应就放置九个超链接地址。dhtml幻灯片播放程序这是一个幻灯片播放程序，也就是一图片轮流播放的程序。我们在一些站点上可以看

17、见这种形式的广告播放条，大多是用cgi做的，也就是要服务器端支持cgi程序，如asp、php、 perl等。但我们这里的实现方法无需cgi，用的仅是css的效果，再加上javascripts的控制。只要你的浏览器是ie 4.0以上或是netscape 3.0以上的就可以了。只不过在这里我们用到了css的filter滤镜效果，该效果只能在ie中出现。有关css的filter滤镜效果，大家可以参看我的css中filter滤镜详解，该文章在y上已经发表。好了，让我们来做点准备工作吧。 首先，为了制作这个效果，我们首先要打几个尺寸一样大小的图片，让其轮流播放。比如，我找了下面三个88x31的图片做为所

18、用的的图片。 其次，让我们再来复习一下css中filter的图片转换滤镜的知识：css中的显示转换滤镜 显示转换滤镜提供的是一种更为多变的转换效果，它不像混合转换滤镜，只提供一种淡入淡出的效果，它还提供了更多的图片转换效果，它的语法是：filter : revealtrans ( duration = 转换的秒数，transition=转换类型 ) 大家可以看见，它有一个转换类型的参数，这里，它提供了24种转换类型，我们只需指定转换类型的代号，就可以让图片按特有的转换效果进行转换。下表就是24种转换滤镜的形式及其对应的代号：动态转换滤镜的属性、方法和事件属性名 说明 取值duration 图像

19、转换的延迟时间，最小单位是毫秒，也就是小数点后第三位。 单位是秒，取值自然数 enabled 指定是否应用滤镜效果 0表示不应用，非0表示就用。 staus 传回一个转换状态 0表示转换停止1表示显示应用的转换滤镜2表示正在转换中方法名 说明apply 将滤镜应用到对象上play 开始转换stop 停止转换事件名 说明onfilterchange 当滤镜转变发生改变或是滤镜完成时所触发的事件 上面的css的转换滤镜如何被javascripts调用的知识我没有过多的说明，我只是列举了他的属性方法和事件。在后面，我们用 javascript来控制他的时候，我会告诉大家如何用javascripts使

20、其工作的。当然这些滤镜只能在ie4.0中浏览，netscape不支持，不过，这并不影响netscape中的显示，只不过netscape中不会出现图片转换的效果了。下面，我要开始最为核心的部分了，就是编写javascript程序了。我们的思路是，可以定义一组图片（若干张），当页面出现时先显示第一张图片，并预载入第二张图片，第一张图片载入后5秒钟，如果第二张图片也载入了，我们就开始自动切换到第二张图片，此时并预载入第三张图片，如果5秒钟内我们载入了第三张图片，就自动切换到第三张图片，如此播放下去直到最后一张又从头开始。当然，这是自动播放的了。我们还允许用户手动进行向前和向后的播放。 首先，我们要解

21、决的问题是图片的预载入，因为这决定了切换过程的流畅性和播放过程的完美性。要预载入一幅图片很简单，我们只要在内存中新建一个图片的实例变量，并把该变量指向一幅图片，这样，我们的浏览器便会自动载入这幅图片的，这就是图片的预载入。用javascript写出来就是下面这个样子： var myimage = new image() myimage.src = "someimage.gif" 然后，我们还要知道，图片是否载入了吗？如果载入了，我们就显示，如果没载入，那么就要出错了。于是我们还要改一下上面的代码，在其中加入两条语句，所以，这段javascript就变成下面的样子了： var

22、 img = new image() img.onload = doreadyimage img.onerror = doerrordisplay img.src = "someimage.gif" 我们加入了图片的onload和onerror事件，分别代表是否预载和预载出错的事件。这两条句语必需在img.src语句的前面。否则的话，图片预载就会出错。 最后就是我们的图片切换程序了，在前面，我们复习了css中filter转换滤镜的各种效果，这里我们用代号为23的随机效果，下面，是我们为在ie中这种效果所写的javascript程序：if (document.images.s

23、lideshow.filters) document.images.slideshow.filters0.stop() document.images.slideshow.filters0.apply() / 使用随机的转换效果 document.images.slideshow.filters.revealtrans.transition=23document.images.slideshow.src = ssource/ 开始进行转换效果的执行if (document.images.slideshow.filters) document.images.slideshow.filters0.

24、play()任何人都能将假期的照片放在自己的网站上，但只有最酷的网络构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个html页面的幻灯片，而是一个真正有动态感的幻灯片秀，每一个影像都下载到同一个html页面去。我们会教你如何使用dynamic html (dhtml)和cascading style sheets(css)去构建专属你个人的幻灯片秀，让你的朋友、家人和同事觉得更无聊，喔不！是印象更深刻。但是记住！因为这种幻灯片秀是用dhtml 写的，因此它只能在4.0或以上更新的浏览器版本才能看得到。 当然喽，这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。步骤一收集

25、你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素，而且所有的相片的像素尺寸都要保持相同如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。步骤二在你的页首标签里，你首先要做的，就是在<style>标签里指出使用的是css。在<style>标签里，在你想要幻灯片出现的页面设定位置，并决定一开头是否要以空白背景图表现，或者直接秀出第一张幻灯片。请将下列程序代码剪贴到你的页面中，并使用你自己选择的位置座标：<style type="text/css"> <!- .slides positi

26、on:absolute; left: 25%; top:25%; visibility:hidden -> </style>步骤三接下来立刻处理css的细节部分，还是在页首标签中插入javascript。在var numslides =之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的kb数）。我们的范例中有五张照片。以下是程序代码：<script language="javascript1.2"> var numslides = 5; var currentslide = numslides;步骤四如果你想加入图片的解

27、释说明文字，可以用下列的程序代码，将我们的说明文字换成你自己的说明文字：var captiontxt = new array(numslides);function setupcaptions() captiontxt1 = "39号码头入口。"captiontxt2 = "海狮在码头附近漫步。"captiontxt3 = "小船在码头*岸。"captiontxt4 = "水底世界鲸鱼壁画。"captiontxt5 = "海中小岛或者是岩石。"步骤五将这里所示的程序代码贴到你网页中的html文件

28、，位置就在javascript的说明文字下。因为navigator 4.0和ie 4.0以不同的方式解读css，我们的script就使用对象检测（object detection）来决定呈现的模式。如果呈现的模式是navigator，它还是可以定义某些特定的对象，使得ie程序代码还是有作用。另外这也是整个程序代码的结尾，所以一定要以</script>标签来作结束：function setup() if (!document.all) document.all = document;for (i=1;i<=numslides;i+) document.all("ima

29、ge"+i).style=document.all("image"+i);switchslide(1);function switchslide(sdir) newslide = currentslide + sdir;if (!newslide) newslide=numslides;if (newslide > numslides) newslide=1;document.all("image"+newslide).style.visibility="visible"document.all("image

30、"+currentslide).style.visibility="hidden"/ 如果不要说明文字，请移除下一行:document.all"captions".document.forcaptions.captionstext.value=captiontxtnewslide;currentslide = newslide;/-></script> 注意那些*近程序代码结尾的注解：如果你没有说明文字，那么就将它下面一行的文字移除。步骤六以</head>关闭页首标签，然后将下列的程序代码，贴到网页html文件中的

31、body部分。 注意，程序代码以个别的<div>标签区分每个影像，他们和正规的<img src>格式有关联：<body onload="setup()"><b> b slide show!</b><div id="image5" class="slides"><img src="fifth.jpg"></div><div id="image4" class="slides"><img src="fourth.jpg"></div><div id="image3" class="slides"><img src="third.jpg"></div><div id="image2&qu

人人文库> 全部分类> 行业资料 > 农林牧渔

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论