透明渐变轮番显示
点 击 预 览 效 果 页 面......
图片以透明渐变轮番显示的脚本效果,过去也有过类似的,可是
不能任意的定制增减图片的数量,这次的是完美的。
制作方法:
在
标签下,粘贴代码:// 设置轮番显示速度 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完整代码:
5、加入代码: