神马文学网巧妙的幻灯片秀
来源：百度文库 编辑：神马文学网 时间：2024/04/29 09:23:14
任何人都能将假期的照片放在自己的网站上，但只有最酷的网络构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个HTML页面的幻灯片，而是一个真正有动态感的幻灯片秀，每一个影像都下载到同一个HTML页面去。我们会教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去构建专属你个人的幻灯片秀，让你的朋友、家人和同事觉得更无聊，喔不！是印象更深刻。但是记住！因为这种幻灯片秀是用DHTML写的，因此它只能在4.0或以上更新的浏览器版本才能看得到。
当然喽，这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。
步骤一
收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。
步骤二
在你的页首标签里，你首先要做的，就是在
步骤三
接下来立刻处理CSS的细节部分，还是在页首标签中插入JavaScript。在var numSLides =之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的KB数）。我们的范例中有五张照片。以下是程序代码：
标签来作结束：
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;
}
//-->
注意那些靠近程序代码结尾的注解：如果你没有说明文字，那么就将它下面一行的文字移除。
步骤六
以关闭页首标签，然后将下列的程序代码，贴到网页HTML文件中的body部分。 注意，程序代码以个别的
当然喽，这种幻灯片秀也有严肃的用途。只是我们现在还没有想到而已。
步骤一
收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，对观众而言会造成视觉上的不和谐。
步骤二
在你的页首标签里，你首先要做的，就是在
步骤三
接下来立刻处理CSS的细节部分，还是在页首标签中插入JavaScript。在var numSLides =之后，设定要秀出的幻灯片数目（别设太多，因为每一张照片都会为网页增加可观的KB数）。我们的范例中有五张照片。以下是程序代码：
标签来作结束：
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;
}
//-->
注意那些靠近程序代码结尾的注解：如果你没有说明文字，那么就将它下面一行的文字移除。
步骤六
以关闭页首标签，然后将下列的程序代码，贴到网页HTML文件中的body部分。 注意，程序代码以个别的
标签区分每个影像，他们和正规的![]()
格式有关联：
Builder.com slide show!
步骤七
观众必须以自己的步调来点按幻灯片，所以你得提供他们点按的东西。。你可以使用简单老式的超链接，但是若有特殊的Previous和Next的GIF点选按钮，就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif：
如果你不想用GIF文件来作Previous和Next点选按钮，用文字取代上面的![]()
标签。
步骤八
最后，在
Builder.com slide show!
步骤七
观众必须以自己的步调来点按幻灯片，所以你得提供他们点按的东西。。你可以使用简单老式的超链接，但是若有特殊的Previous和Next的GIF点选按钮，就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif：
如果你不想用GIF文件来作Previous和Next点选按钮，用文字取代上面的
步骤八
最后，在