巧妙的幻灯片秀


任何人都能将假期的照片放在自己的网站上,但只有最酷的网络构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个HTML页面的幻灯片,而是一个真正有动态感的幻灯片秀,每一个影像都下载到同一个HTML页面去。

我们会教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去构建专属你个人的幻灯片秀,让你的朋友、家人和同事觉得更无聊,喔不!是印象更深刻。但是记住!因为这种幻灯片秀是用DHTML写的,因此它只能在4.0或以上更新的浏览器版本才能看得到。 


 
当然喽,这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。 

步骤一 
收集你已经准备放在网络上的影像,而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素,而且所有的相片的像素尺寸都要保持相同--如果照片尺寸大小不定,对观众而言会造成视觉上的不和谐。 

步骤二 
在你的页首标签里,你首先要做的,就是在<STYLE>标签里指出使用的是CSS。在<STYLE>标签里,在你想要幻灯片出现的页面设定位置,并决定一开头是否要以空白背景图表现,或者直接秀出第一张幻灯片。请将下列程序代码剪贴到你的页面中,并使用你自己选择的位置座标: 


<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> </STYLE> 


步骤三 
接下来立刻处理CSS的细节部分,还是在页首标签中插入JavaScript。在var numSLides =之后,设定要秀出的幻灯片数目(别设太多,因为每一张照片都会为网页增加可观的KB数)。我们的范例中有五张照片。以下是程序代码: 


<SCRIPT language="JavaScript1.2"> 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文件,位置就在JavaScript的说明文字下。因为Navigator 4.0和IE 4.0以不同的方式解读CSS,我们的script就使用对象检测(object detection)来决定呈现的模式。如果呈现的模式是Navigator,它还是可以定义某些特定的对象,使得IE程序代码还是有作用。另外这也是整个程序代码的结尾,所以一定要以</SCRIPT>标签来作结束: 

 

function setUp() {
if (!document.all) {
 document.all = document;
 for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
 }
switchSlide(1);
}

function switchSlide(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;
}

//-->
</script> 

 


 
注意那些靠近程序代码结尾的注解:如果你没有说明文字,那么就将它下面一行的文字移除。 

步骤六 
以</HEAD>关闭页首标签,然后将下列的程序代码,贴到网页HTML文件中的body部分。 注意,程序代码以个别的<DIV>标签区分每个影像,他们和正规的<IMG src>格式有关联: 


<BODY onLoad="setUp()">
<B> Builder.com slide show!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>


步骤七 
观众必须以自己的步调来点按幻灯片,所以你得提供他们点按的东西。。你可以使用简单老式的超链接,但是若有特殊的Previous和Next的GIF点选按钮,就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif: 


<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV> 


如果你不想用GIF文件来作Previous和Next点选按钮,用文字取代上面的<IMG>标签。 

步骤八 
最后,在<TEXTAREA>输入欲显现的说明文字。你可以随意决定<TEXTAREA>的尺寸大小,只要改变rows=和cols=的数字即可。以下是程序代码: 


<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>Picture caption</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV> 

本文作者:



相关阅读:
ASP处理多关键词查询实例代码
Fedora 10 安装教程全程图解推荐
ASP 80040e14错误的解决方法
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
SQL注入漏洞全接触--进阶篇(一)
CSS网页设计技巧十则
PPJOKE 0.1 (网页嵌入聊天)提供下载
探讨ASP.NET AJAX客户端开发技术
当鼠标移出灰色区域时候,菜单项怎么隐藏起来
JS 对象介绍
解析HTML5之表单新功能
十分钟打造AutoComplete自动完成效果代码
让注册表修改立即生效的DIY批处理文件
PHP与MySQL开发的8个技巧小结
快速导航

Copyright © 2016 phpStudy |