当前页:网页制作 >>>在DW里制作图片轮番显效果(简单实用,有原文件下载)
在DW里制作图片轮番显效果(简单实用,有原文件下载)
责任编辑:黄舒奇  发表时间:2007-09-20  最后修改时间2016-05-25
    更详细的图文教程《在DW里制作图片轮番显示效果(新建文件夹,)源文件下载
    
在FLASH、Fireworks等一些软件里制作图片轮番显示效果是一件非常容易的事,但如果你都不会,只会用DW怎么办?那么今天我们就来实习,在DW里用代码制作图片轮番显示。用代码显示的好处是,以后想换内容,只要把里面的图片换一下就行了,就不要另做页面。
     第一步:准备四张同样尺寸的图片,图片格式不限,JPG或者GIF都行。并分别命名“1.jpg、 2.jpg、 3.jpg、 4.jpg"。 (注意:你如果是GIF格式的那就分别命名为1.gif.....命名自定,但一定要与代码里面的名一样,否则不会显示。)
     第二步:在站点根目录下新建一个文件夹,并命名为“images”,把以上准备好的四张图片放进去。
    
第三步:打开DW软件,将下面的代码放置在<head></head>标签之间
提示:您可以先修改部分代码再运行

     注:还可以添加图像的数量,只需在“指定图像文件”那段代码的后面添加代码即可,形式如pic[5]=images/6.jpg。通过设置轮番显示速度值,可以改变图片显示的快慢。
     第四步:将<body>标签改为<body on load="run Slide Show()">,表示页面完成装载后就开始执函数run Slide Show()”。
     第五步:在DW里切换到设计视图,单击选中图片,在属性面板“图像”下方的文本框中输入“Slide Show”,设置图像名字。如下图:
                        SlideShow
第六步:保存文件后,按【F12】键预览,可以看到图片轮番显示的效果。
效果预览 

源文件下载 https://yunpan.cn/cPDMv9g7CBv5P (提取码:17d0)下载前请你复制好提取码