快捷搜索:  test  as

巧妙的幻灯片秀

任何人都能将假期的照片放在自己的网站上,但只有最酷的收集构建者会将他们设计成一场幻灯片秀。而且还不是那种简单的一张照片一个HTML页面的幻灯片,而是一个真正有动态感的幻灯片秀,每一个影像都下载到同一个HTML页面去。我们会教你若何应用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去构建专属你小我的幻灯片秀,让你的同伙、家人和同事感觉更无聊,喔不!是印象更深刻。然则记着!由于这种幻灯片秀是用DHTML写的,是以它只能在4.0或以上更新的浏览器版本才能看获得。

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

步骤一

网络你已经筹备放在收集上的影像,而且将他们裁成相同的尺寸。确定尺寸范围不跨越640 x 480个像素,而且所有的相片的像素尺寸都要维持相同--假如照片尺寸大年夜小不定,对不雅众而言会造成视觉上的反面谐。

步骤二

在你的页首标签里,你首先要做的,便是在标签里指出应用的是CSS。在标签里,在你想要幻灯片呈现的页面设定位置,并抉择一开首是否要以空缺背景图体现,或者直接秀出第一张幻灯片。请将下列法度榜样代码剪贴到你的页面中,并应用你自己选择的位置座标:

步骤三

接下来立即处置惩罚CSS的细节部分,照样在页首标签中插入JavaScript。在var numSLides =之后,设定要秀出的幻灯片数目(别设太多,由于每一张照片都邑为网页增添可不雅的KB数)。我们的典型中有五张照片。以下是法度榜样代码:

...

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法度榜样代码照样有感化。别的这也是全部法度榜样代码的结尾,以是必然要以标签来作停止:

function setUp() {

if (!document.all) {

document.all = document;

for (i=1;istyle=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];

本篇文章共2页,此页为首页下一页

.

.

.>

.

您可能还会对下面的文章感兴趣: