图片轮显.docx
- 文档编号:30756278
- 上传时间:2023-08-20
- 格式:DOCX
- 页数:12
- 大小:22.02KB
图片轮显.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)'
参考图片代码:
hidden;filter: revealtrans(duration=2.0,transition=12)'> 制作完成。 观看效果 使用CSS中的revealTrans滤镜制作超弦图片的播放 CSS中有revealTrans滤镜(具体介绍请参看巧用CSS的RevealTrans滤镜),也曾用该滤镜制作过各种图片播放的效果(类似于使用CSS滤镜revealTrans制作图片渐显效果)。 知道其在网页中制作特效非常有用处。 这次,我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路: 使用revealTrans滤镜制作出超弦图片播放的效果,并每张图片有各自的链接地址。 制作方法: 1、在
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
完整代码:
revealTrans(Duration=2,Transition=23)"name=slide> 4、给图片加超链接: slidelink()"> 5、加入代码: -- ////changenumberofimagesbelow varnumber_of_images=9 //changespeedbelow(inseconds) varspeed=3 varstep=1 varwhichimage=1 functionslideit(){ 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 step++ else step=1 if(document.all) setTimeout("slideit()",speed*1000+3000) else setTimeout("slideit()",speed*1000) } functionslidelink(){ 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" elseif(whichimage==9) top.location.href="/study.html" } 其中: 各链接地址相对应 注意,页面地址必须与图片张数相对应。 本教学使用九张图片,相应就放置九个超链接地址。 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数)。 我们的范例中有五张照片。 以下是程序代码: 步骤四 如果你想加入图片的解释说明文字,可以用下列的程序代码,将我们的说明文字换成你自己的说明文字: 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部分。 注意,程序代码以个别的 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。