图片轮显.docx

图片轮显.docx

《图片轮显.docx》由会员分享，可在线阅读，更多相关《图片轮显.docx（12页珍藏版）》请在冰豆网上搜索。

图片轮显

看看下面的：

Duration的值为网页动态过渡的时间，单位为秒。

Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。

如下表：

0 盒状收缩 1 盒状放射

2 圆形收缩 3 圆形放射

4 由下往上 5 由上往下

6 从左至右 7 从右至左

8 垂直百叶窗 9 水平百叶窗

10 水平格状百叶窗 11垂直格状百叶窗

12 随意溶解 13从左右两端向中间展开

14从中间向左右两端展开 15从上下两端向中间展开

16从中间向上下两端展开 17 从右上角向左下角展开

18 从右下角向左上角展开 19 从左上角向右下角展开

20 从左下角向右上角展开 21 水平线状展开

22 垂直线状展开 23 随机产生一种过渡方式

透明渐变轮番显示

点击预览效果页面......

图片以透明渐变轮番显示的脚本效果，过去也有过类似的，可是

不能任意的定制增减图片的数量，这次的是完美的。

　　制作方法：

　　在标签下，粘贴代码：

//设置轮番显示速度SetslideShowSpeed（milliseconds）

varslideShowSpeed=5000;

//匀滑转换时间Durationofcrossfade（seconds）

varcrossFadeDuration=3;

//指定图像文件Specifytheimagefiles

varPic=newArray（）;

//toaddmoreimages,justcontinue

//thepattern,addingtothearraybelow

Pic[0]='1.jpg'

Pic[1]='2.jpg'

Pic[2]='3.jpg'

Pic[3]='4.jpg'

Pic[4]='5.jpg'

//donoteditanythingbelowthisline

vart;

varj=0;

varp=Pic.length;

varpreLoad=newArray（）;

for（i=0;i

preLoad=newImage（）;

preLoad.src=Pic;

}

functionrunSlideShow（）{

if（document.all）{

document.images.SlideShow.style.filter="blendTrans（duration=2）";

document.images.SlideShow.style.filter="blendTrans（duration=crossFadeDuration）";

document.images.SlideShow.filters.blendTrans.Apply（）;

}

document.images.SlideShow.src=preLoad[j].src;

if（document.all）{

document.images.SlideShow.filters.blendTrans.Play（）;

}

j=j+1;

if（j>（p-1））j=0;

t=setTimeout（'runSlideShow（）',slideShowSpeed）;

}

　　修改body：

　　将表格单元格设置名称“id=VU”：

　　在中加入代码：

　　至此，我们的效果便制作好了，你不仿试试！

点击预览效果页面......

　　制作方法：

　　1.在中插入代码：

isns=navigator.appName=="Netscape";

//定义播放图片张数

img1=newImage（）

img2=newImage（）

img3=newImage（）

img4=newImage（）

img5=newImage（）

//图片路径、文件名

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-logo.jpg'

nn=1

functionchange_img（）

{

eval（'document.pic.src=img'+nn+'.src'）;

nn++;

if（nn>5）nn=1

if（!

isns）

{

pic.filters.item（0）.apply（）

pic.style.visibility='visible'

pic.filters.item（0）.play（）

setTimeout（"pic.style.visibility='hidden'",4000）;

}

else

document.pic.visibility='visible'

tt=setTimeout（'change_img（）',4000）

}

　　可以在代码中按照中文介绍，修改相关信息。

　　2.在中加载：

　　3.插入第一张图片，并命名：

id="pic"

　　插入代码：

style='visibility:

hidden;filter:

revealtrans（duration=2.0,transition=12）'

　　参考图片代码：

　　制作完成。

观看效果

使用CSS中的revealTrans滤镜制作超弦图片的播放

CSS中有revealTrans滤镜（具体介绍请参看巧用CSS的RevealTrans滤镜），也曾用该滤镜制作过各种图片播放的效果（类似于使用CSS滤镜revealTrans制作图片渐显效果）。

知道其在网页中制作特效非常有用处。

这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。

　　实现思路：

使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。

　　制作方法：

　　1、在中插入JS代码：

functionreapply（）{

setTimeout（"slideit（）",800）

returntrue

}

window.onerror=reapply

--

//preloadimages

varimage1=newImage（）

image1.src="images/01.jpg"

varimage2=newImage（）

image2.src="images/02.jpg"

varimage3=newImage（）

image3.src="images/03.jpg"

varimage4=newImage（）

image4.src="images/04.jpg"

varimage5=newImage（）

image5.src="images/05.jpg"

varimage6=newImage（）

image6.src="images/06.jpg"

varimage7=newImage（）

image7.src="images/07.jpg"

varimage8=newImage（）

image8.src="images/08.jpg"

varimage9=newImage（）

image9.src="images/09.jpg"

//-->

　　其中：

images/bigbanner/XXX.jpg为显示图片的路径，可按实际情况修改。

　　2、在中插入代码：

onload=slideit（）

　　3、在页面中插入图片，并在图片中插入：

style="FILTER:

revealTrans（Duration=2,Transition=23）"，并命名为：

name=slide

　　完整代码：

　　4、给图片加超链接：

slidelink（）">

　　5、加入代码：

　　其中：

各链接地址相对应中插入的JS代码中的图片。

　　注意，页面地址必须与图片张数相对应。

本教学使用九张图片，相应就放置九个超链接地址。

DHTML幻灯片播放程序

这是一个幻灯片播放程序，也就是一图片轮流播放的程序。

我们在一些站点上可以看见这种形式的广告播放条，大多是用CGI做的，也就是要服务器端支持CGI程序，如ASP、PHP、Perl等。

但我们这里的实现方法无需CGI，用的仅是CSS的效果，再加上JavaScripts的控制。

只要你的浏览器是IE4.0以上或是Netscape3.0以上的就可以了。

只不过在这里我们用到了CSS的Filter滤镜效果，该效果只能在IE中出现。

有关CSS的Filter滤镜效果，大家可以参看我的《CSS中Filter滤镜详解》，该文章在Y上已经发表。

好了，让我们来做点准备工作吧。

　　首先，为了制作这个效果，我们首先要打几个尺寸一样大小的图片，让其轮流播放。

比如，我找了下面三个88x31的图片做为所用的的图片。

　　其次，让我们再来复习一下CSS中Filter的图片转换滤镜的知识：

CSS中的显示转换滤镜

　　显示转换滤镜提供的是一种更为多变的转换效果，它不像混合转换滤镜，只提供一种淡入淡出的效果，它还提供了更多的图片转换效果，它的语法是：

Filter:

RevealTrans（duration=转换的秒数，transition=转换类型）

　　大家可以看见，它有一个转换类型的参数，这里，它提供了24种转换类型，我们只需指定转换类型的代号，就可以让图片按特有的转换效果进行转换。

下表就是24种转换滤镜的形式及其对应的代号：

动态转换滤镜的属性、方法和事件

属性名            说明                              取值

duration      图像转换的延迟时间，最小单位是毫秒，也就是小数点后第三位。

单位是秒，取值自然数  

enabled        指定是否应用滤镜效果                0表示不应用，非0表示就用。

staus            传回一个转换状态                0表示转换停止

1表示显示应用的转换滤镜

2表示正在转换中

方法名说明

Apply将滤镜应用到对象上

Play开始转换

Stop停止转换

事件名说明

OnFilterChange当滤镜转变发生改变或是滤镜完成时所触发的事件

　　上面的CSS的转换滤镜如何被JavaScripts调用的知识我没有过多的说明，我只是列举了他的属性方法和事件。

在后面，我们用Javascript来控制他的时候，我会告诉大家如何用JavaScripts使其工作的。

当然这些滤镜只能在IE4.0中浏览，NetScape不支持，不过，这并不影响netscape中的显示，只不过Netscape中不会出现图片转换的效果了。

下面，我要开始最为核心的部分了，就是编写javascript程序了。

我们的思路是，可以定义一组图片（若干张），当页面出现时先显示第一张图片，并预载入第二张图片，第一张图片载入后5秒钟，如果第二张图片也载入了，我们就开始自动切换到第二张图片，此时并预载入第三张图片，如果5秒钟内我们载入了第三张图片，就自动切换到第三张图片，如此播放下去直到最后一张又从头开始。

当然，这是自动播放的了。

我们还允许用户手动进行向前和向后的播放。

　　首先，我们要解决的问题是图片的预载入，因为这决定了切换过程的流畅性和播放过程的完美性。

要预载入一幅图片很简单，我们只要在内存中新建一个图片的实例变量，并把该变量指向一幅图片，这样，我们的浏览器便会自动载入这幅图片的，这就是图片的预载入。

用javascript写出来就是下面这个样子：

　　　　　　varmyImage=newImage（）

　　　　　　myImage.src="someImage.gif"

　　然后，我们还要知道，图片是否载入了吗？

如果载入了，我们就显示，如果没载入，那么就要出错了。

于是我们还要改一下上面的代码，在其中加入两条语句，所以，这段JavaScript就变成下面的样子了：

　　　　　　varimg=newImage（）

　　　　　　img.onload=doReadyImage

　　　　　　img.onerror=doErrorDisplay

　　　　　　img.src="someImage.gif"

　　我们加入了图片的onload和onerror事件，分别代表是否预载和预载出错的事件。

这两条句语必需在img.src语句的前面。

否则的话，图片预载就会出错。

　　最后就是我们的图片切换程序了，在前面，我们复习了CSS中Filter转换滤镜的各种效果，这里我们用代号为23的随机效果，下面，是我们为在IE中这种效果所写的JavaScript程序：

if（document.images.slideShow.filters）

{

　　document.images.slideShow.filters[0].Stop（）

　　document.images.slideShow.filters[0].Apply（）

　　//使用随机的转换效果

　　document.images.slideShow.filters.revealTrans.transition=23

}

document.images.slideShow.src=sSource

//开始进行转换效果的执行

if（document.images.slideShow.filters）

　　　　document.images.slideShow.filters[0].Play（）

任何人都能将假期的照片放在自己的网站上，但只有最酷的网络构建者会将他们设计成一场幻灯片秀。

而且还不是那种简单的一张照片一个HTML页面的幻灯片，而是一个真正有动态感的幻灯片秀，每一个影像都下载到同一个HTML页面去。

我们会教你如何使用DynamicHTML（DHTML）和CascadingStyleSheets（CSS）去构建专属你个人的幻灯片秀，让你的朋友、家人和同事觉得更无聊，喔不！

是印象更深刻。

但是记住！

因为这种幻灯片秀是用DHTML写的，因此它只能在4.0或以上更新的浏览器版本才能看得到。

当然喽，这种幻灯片秀也有严肃的用途。

只是我们现在还没有想到而已。

步骤一

收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。

确定尺寸范围不超过640x480个像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。

步骤二

在你的页首标签里，你首先要做的，就是在

步骤三

接下来立刻处理CSS的细节部分，还是在页首标签中插入JavaScript。

在varnumSLides=之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的KB数）。

我们的范例中有五张照片。

以下是程序代码：

varnumSlides=5;varcurrentSlide=numSlides;

步骤四

如果你想加入图片的解释说明文字，可以用下列的程序代码，将我们的说明文字换成你自己的说明文字：

varcaptionTxt=newArray（numSlides）;

functionsetUpCaptions（）{

captionTxt[1]="39号码头入口。

"

captionTxt[2]="海狮在码头附近漫步。

"

captionTxt[3]="小船在码头*岸。

"

captionTxt[4]="水底世界鲸鱼壁画。

"

captionTxt[5]="海中小岛或者是岩石。

"

}

步骤五

将这里所示的程序代码贴到你网页中的HTML文件，位置就在JavaScript的说明文字下。

因为Navigator4.0和IE4.0以不同的方式解读CSS，我们的script就使用对象检测（objectdetection）来决定呈现的模式。

如果呈现的模式是Navigator，它还是可以定义某些特定的对象，使得IE程序代码还是有作用。

另外这也是整个程序代码的结尾，所以一定要以标签来作结束：

functionsetUp（）{

if（!

document.all）{

document.all=document;

for（i=1;i<=numSlides;i++）document.all[（"image"+i）].

style=document.all[（"image"+i）];

}

switchSlide

（1）;

}

functionswitchSlide（sDir）{

newSlide=currentSlide+sDir;

if（!

newSlide）newSlide=numSlides;

if（newSlide>numSlides）newSlide=1;

document.all[（"image"+newSlide）].style.visibility="visible";

document.all[（"image"+currentSlide）].

style.visibility="hidden";

//如果不要说明文字，请移除下一行:

document.all["captions"].document.forCaptions.captionsText.

value=captionTxt[newSlide];

currentSlide=newSlide;

}

//-->

注意那些*近程序代码结尾的注解：

如果你没有说明文字，那么就将它下面一行的文字移除。

步骤六

以关闭页首标签，然后将下列的程序代码，贴到网页HTML文件中的body部分。

注意，程序代码以个别的