透明渐变轮番显示

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

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

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

制作方法：

在

标签下，粘贴代码：

// 设置轮番显示速度 Set slideShowSpeed (milliseconds)

var slideShowSpeed = 5000;

// 匀滑转换时间 Duration of crossfade (seconds)

var crossFadeDuration = 3;

// 指定图像文件 Specify the image files

var Pic = new Array();

// to add more images, just continue

// the pattern, adding to the array below

Pic[0] = ‘1.jpg‘

Pic[1] = ‘2.jpg‘

Pic[2] = ‘3.jpg‘

Pic[3] = ‘4.jpg‘

Pic[4] = ‘5.jpg‘

// do not edit anything below this line

var t;

var j = 0;

var p = Pic.length;

var preLoad = new Array();

for (i = 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.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=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-}

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代码：

function reapply(){

setTimeout("slideit()",800)

return true

}

window.οnerrοr=reapply

　　其中：images/big完整代码：

4、给图片加超链接：

5、加入代码：