片轮显代码大全
透明渐变轮番显示
图片以透明渐变轮番显示的脚本效果,过去也有过类似的,可是
不能任意的定制增减图片的数量,这次的是完美的。
制作方法:
在标签下,粘贴代码:
// 设置轮番显示速度 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 - 1)) j = 0;
t = setTimeout('runSlideShow()' slideShowSpeed);
}
修改body:
将表格单元格设置名称“id=VU”:
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"
插入代码:s='visibility:hidden;filter:revealtrans(duration=2.0transition=12)'
参考图片代码:
制作完成。
观看效果
使用CSS中的revealTrans滤镜制作超弦图片的播放
CSS中有revealTrans滤镜(详细介绍请参看巧用CSS的 RevealTrans 滤镜),也曾用该滤镜制作过各种图片播放的效果(类似于使用CSS滤镜revealTrans制作图片渐显效果)。知道其在网页中制作特效非常有用处。这次,我们预备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。
实现思路:使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接地址。
制作方法:
1、在中插入JS代码:
function reapply(){
setTimeout("slideit()"800)
return true
}
window.on 其中:images/bigbanner/XXX.jpg为显示图片的路径,可按实际情况修改。 2、在中插入代码:on 3、在页面中插入图片,并在图片中插入:s="FILTER: revealTrans(Duration=2 Transition=23)",并命名为:name=slide 完整代码: 步骤三 接下来马上处理CSS的细节部分,还是在页首标签中插入ja var numSlides = 5; var currentSlide = numSlides; 步骤四 假如你想加入图片的解释说明文字,可以用下列的程序代码,将我们的说明文字换成你自己的说明文字: var captionTxt = new Array(numSlides); function setUpCaptions() { captionTxt[1] = "39号码头入口。" captionTxt[2] = "海狮在码头四周漫步。" captionTxt[3] = "小船在码头*岸。" captionTxt[4] = "水底世界鲸鱼壁画。" captionTxt[5] = "海中小岛或者是岩石。" } 步骤五 将这里所示的程序代码贴到你网页中的HTML文件,位置就在ja function setUp() { if (!document.all) { document.all = document; for (i=1;inumSlides) newSlide=1; document.all[("image"+newSlide)].style.visibility="visible"; document.all[("image"+currentSlide)]. style.visibility="hidden"; // 如果不要说明文字,请移除下一行: document.all["captions"].document.forCaptions.captionsText.