 |
|
 |
|
![]() |
![]() |
|
 |
| 图片轮显代码大全(JS幻灯片) |
|
| 作者:佚名 文章来源:ebook-cn.com 更新时间:2006-3-1 23:07:46 |
![]() |
|
|
|
s(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); } functi上一页 [1] [2] [3] [4] [5] [6] [7] [8] [9] 下一页
|
|
|
|
|
|
|
 |
|
![]() |
|
![]() |
|