网址:http://blog.163.com/haaic@126/blog/static/552935552008924113632157/
透明渐变轮番显示
图片以透明渐变轮番显示的脚本效果,过去也有过类似的,可是
不能任意的定制增减图片的数量,这次的是完美的。
制作方法:
在<head>标签下,粘贴代码:
<SCRIPT LANGUAGE="JavaScript">
// 设置轮番显示速度 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);
}
</script>
修改body:
<body bgcolor="#FFFFFF" text="#000000" >
将表格单元格设置名称“id=VU”:
<td id=VU>
在<img>中加入代码:<img src="1.jpg" name='SlideShow'>
至此,我们的效果便制作好了,你不仿试试!
点 击 预 览 效 果 页 面......
制作方法:
1. 在<head>中插入代码:
<script language='javascript'>
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-logo.jpg'
nn=1
function change_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)
}
</script>
可以在代码中按照中文介绍,修改相关信息。
2. 在<body>中加载:<body >
3. 插入第一张图片,并命名:id="pic"
插入代码:style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'
参考图片代码:
<img src="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 滤镜),也曾用该滤镜制作过各种图片播放的效果(类似于使用CSS滤镜revealTrans制作图片渐显效果)。知道其在网页中制作特效非常有用处。这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。
实现思路:使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接地址。
制作方法:
1、在<head>中插入JS代码:
<SCRIPT language=JavaScript1.2>
function reapply(){
setTimeout("slideit()",800)
return true
}
window.onerror=reapply
</SCRIPT>
<SCRIPT language=JavaScript1.1>
<!--
//preload images
var 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"
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"
//-->
</SCRIPT>
其中:images/bigbanner/XXX.jpg为显示图片的路径,可按实际情况修改。
2、在<body>中插入代码:onload=slideit()
3、在页面中插入图片,并在图片<img>中插入:style="FILTER: revealTrans(Duration=2, Transition=23)",并命名为:name=slide
完整代码:<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、加入代码:
<SCRIPT>
<!--
////change number of images below
var number_of_images=9
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
top.location.href="/index.html"
if (whichimage==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.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幻灯片播放程序
这是一个幻灯片播放程序,也就是一图片轮流播放的程序。我们在一些站点上可以看见这种形式的广告播放条,大多是用CGI做的,也就是要服务器端支持CGI程序,如ASP、PHP、Perl等。但我们这里的实现方法无需CGI,用的仅是CSS的效果,再加上JavaScripts的控制。只要你的浏览器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不过在这里我们用到了CSS的Filter滤镜效果,该效果只能在IE中出现。有关CSS的Filter滤镜效果,大家可以参看我的《CSS中Filter滤镜详解》,该文章在Yesky.com上已经发表。好了,让我们来做点准备工作吧。
首先,为了制作这个效果,我们首先要打几个尺寸一样大小的图片,让其轮流播放。比如,我找了下面三个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秒钟内我们载入了第三张图片,就自动切换到第三张图片,如此播放下去直到最后一张又从头开始。当然,这是自动播放的了。我们还允许用户手动进行向前和向后的播放。
首先,我们要解决的问题是图片的预载入,因为这决定了切换过程的流畅�
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
web-picture-show.zip (1个子文件)
web picture show.txt 13KB
共 1 条
- 1
资源评论
JaniceLu
- 粉丝: 84
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功