简单的幻灯片html代码(html基础语法)

编程之家2026-06-09738次浏览

大家好，关于简单的幻灯片html代码很多朋友都还不太明白，今天小编就来为大家分享关于html基础语法的知识，希望对各位有所帮助！

零基础的人怎么用 HTML5 制作幻灯片

ppt基础知识及使用技巧

PowerPoint软件是教师制作课件的主要工具之一。下面介绍了ppt的一些基础知识及使用技巧，仅供初学课件制作者参考。

一、PPT的启动和退出

1、打开方法：

方法一：单击桌面“开始”按钮，选择“程序”→“Microsoft Office”→“Microsoft Office PowerPoint 2003”。这是一种标准的启动方法。

方法二：双击桌面快捷方式图标“Microsoft Office PowerPoint....”。这是一种快速的启动方法。

2、退出方法：

方法一：单击窗口右上角的“×”。

方法二：关闭所有演示文稿并退出PPT

单击菜单“文件”→“退出”。

二、幻灯片版式的选择

在右侧幻灯片版式中选择并单击需要的版式。教师在实际的课件制作过程中，希望能够自己设计模板，这时可采用“内容版式”中的“空白”版式，进行自由的创作。

三、有关幻灯片的各种操作

应用PPT进行设计的简单过程是：首先按照顺序创建若干张幻灯片，然后在这些幻灯片上插入需要的对象，最后按照幻灯片顺序从头到尾进行播放（可以为对象创建超级链接来改变幻灯片的播放顺序）。

幻灯片在PPT设计中处于核心地位，有关幻灯片的操作包括幻灯片的选择、插入、删除、移动和复制，这些操作既可以在“普通视图”下进行，也可以在“幻灯片浏览视图”下进行。下面以“普通视图”为例，介绍有关幻灯片的各种操作。在“普通视图”下，PPT主窗口的左侧是“大纲编辑窗口”，其中包括“大纲”和“幻灯片”两个标签，点击“幻灯片”标签，这时将显示当前演示文稿内所有幻灯片的缩略图，每张幻灯片前的序号表示它在播放时所处的顺序，通过拖动滚动条可显示其余幻灯片，有关幻灯片的操作在该区域进行。

1、幻灯片的选择

有许多操作的前提都要求先选择幻灯片，对幻灯片的选择包括单选（选择一张幻灯片）和多选（同时选择多张幻灯片），其中多选又包括连续多选（相邻的多张幻灯片）和非连续多选（不相邻的多张幻灯片），操作方法如下：

（1）单选：单击需要选定的幻灯片缩略图（如上图：左侧黄色方框里的幻灯片尾缩略图），缩略图出现蓝色框线，该幻灯片被称作“当前幻灯片”。

（2）连续多选：先单击相邻多张幻灯片的第一张，然后按住Shift键，单击最后一张。

（3）非连续多选：先单击某张幻灯片，然后按住Ctrl键，单击需要选择的幻灯片。

2、幻灯片的插入

在设计过程中感到幻灯片不够用时，就需要插入幻灯片。插入幻灯片有四种方法，分别是：

方法一：先选择某张幻灯片，然后单击菜单“插入”→“新幻灯片”，当前幻灯片之后被插入了一张新幻灯片。

方法二：先选择某张幻灯片，然后单击格式工具栏的“新幻灯片”按钮，当前幻灯片之后被插入了一张新幻灯片。

方法三：右击某张幻灯片，然后选择弹出菜单中的“新幻灯片”项，该张幻灯片之后被插入了一张新幻灯片。

方法四：先选择某张幻灯片，然后按“回车”键，当前幻灯片之后被插入了一张新幻灯片。

3幻灯片的删除

若某张（些）幻灯片不再有用，就需要删除幻灯片。删除幻灯片有三种方法，分别是：

方法一：选择欲删除幻灯片（可以多选），然后按键盘上的“Delete”键，被选幻灯片被删除，其余幻灯片将顺序上移。

方法二：选择欲删除幻灯片（可以多选），然后选择菜单“编辑”→“剪切”，被选幻灯片被删除，其余幻灯片将顺序上移。

方法三：右击欲删除幻灯片（可以多选），然后选择弹出菜单中的“删除幻灯片”项，被选幻灯片被删除，其余幻灯片将顺序上移。

4、幻灯片的移动

有时幻灯片的播放顺序不合要求，就需要移动幻灯片的位置，调整幻灯片的顺序。移动幻灯片有两种方法，分别是：

（1）拖动的方法：选择欲移动的幻灯片，用鼠标左键将它拖动到新的位置，在拖动过程中，有一条黑色横线随之移动，黑色横线的位置决定了幻灯片移动到的位置，当松开左键时，幻灯片就被移动到了黑色横线所在的位置。

（2）剪切的方法：选择欲移动的幻灯片，然后选择菜单“编辑”→“剪切”，被选幻灯片消失，单击想要移动到的新位置，会有一条黑色横线闪动指示该位置，然后选择菜单“编辑”→“粘贴”，幻灯片就移动到了该位置。

5幻灯片的复制

当需要大量相同幻灯片时，可以复制幻灯片。复制幻灯片的方法是：

1）选择需要复制的幻灯片。

2）右击选中的幻灯片，在弹出菜单中选择“复制”项。

3）右击复制的目标位置，在弹出菜单中选择“粘贴”项。

事实上，有关幻灯片的操作在“幻灯片浏览视图”下进行将更加方便和直观，大家可以自己尝试。

PPT主窗口左下角有三个视图按钮，分别为“普通视图”、“幻灯片浏览视图”和“幻灯片放映”，点击它们可以在不同视图之间切换。

6、改变幻灯片的背景

幻灯片的背景指的是幻灯片的底色，PPT默认的幻灯片背景为白色。为了提高演示文稿的可视性，我们往往要改变幻灯片的背景，PPT提供了多种方法允许用户自行设计丰富多彩的背景。背景的种类包括单色、渐变、纹理、图案、图片和设计模板，下面分别介绍它们的实现方法。

（1）“背景”对话框

通过“背景”对话框，可以设置幻灯片的各种背景。调出背景对话框有两种方法：

方法一：选择菜单“格式”→“背景”，弹出“背景”对话框。

方法二：右击幻灯片空白区，弹出“背景”对话框。

在“背景”对话框中，左半部“背景填充”显示了当前背景，左下部下拉按钮可以选择“其他颜色”或“填充效果”，右半部“应用”按钮指将背景应用到当前幻灯片，“全部应用”按钮指将背景应用到所有幻灯片。当点击“全部应用”后，新建的幻灯片自动应用该背景。

（2）单色背景的设置

单色背景指背景使用单一的颜色，也称纯色，默认的白色背景就是一种单色背景。在“背景”对话框中，单击背景填充下拉键头，选择“其他颜色”，弹出“颜色”对话框，该对话框有两个标签：“标准”和“自定义”。

标准：提供了256种标准色和16种由白到黑的灰度色，单击想要的的颜色，确定。

自定义：可通过两种方式选择颜色：

1）单击中部的调色盘选择一种基本色，通过上下拖动右边滑块调整亮度，确定。

2）直接在下方输入红绿蓝的颜色值指定颜色。

（3）渐变背景的设置

渐变指的是由一种颜色逐渐过渡到另一种颜色，渐变色会给人一种眩目的感觉。在“背景”对话框中，单击背景填充下拉键头，选择“填充效果”，弹出“填充效果”对话框，该对话框有四个标签：“渐变”、“纹理”、“图案”和“图片”，选择“渐变”标签。

在“渐变标签”的下部是“底纹样式”和“变形”，“底纹样式”决定了渐变的方向，共6类；“变形”决定了渐变颜色所处的位置，共4类，两者配合，可产生24种渐变效果。

在“渐变标签”的上部是“颜色”，包括“单色”、“双色”和“预设”，它们决定了参与渐变的两种颜色分别是什么。

①单色：指某种颜色到黑色或白色的渐变，颜色1可为任意颜色（单击下拉箭头选择颜色），颜色1下方的滑块决定了另一种颜色是黑色还是白色，“深”指黑色，“浅”指白色，拖动滑块调整黑白。

②双色：通过选择颜色1和颜色2指定参与渐变的两种颜色。

③预设：PPT预设了24种渐变配色方案，每种方案起了一个好听的名字，可供用户快速选择。

(4)纹理、图案和图片背景的设置

纹理指PPT预设了一些图片作为用户的背景选择；图案指以某种颜色为背景，以前景色作为线条色所构成的图案背景；图片指可以采用外部图像文件作为背景。

1）纹理背景的设置：在“纹理”标签下，单击某个纹理，确定。

2）图案背景的设置：在“图案”标签下，单击某个图案，选择前景色和背景色，确定。

3）图片背景的设置：在“图片”标签下，单击“选择图片”按钮，在随之出现的“选择图片”对话框中找到外存中的图片文件，双击，确定。

(5)应用设计模板作背景

除了可以使用“背景”对话框设置背景外，PPT还提供了应用设计模板作背景。设计模板是一种PPT文件，其中规定了背景图像和各级标题的字体字号，可供用户直接使用。用户既可以使用PPT内置的设计模板，也可以自己制作设计模板供以后使用。使用PPT内置的设计模板的方法是：

1）在“任务窗格”菜单中选择“幻灯片设计”，打开幻灯片设计任务窗格。

2）单击幻灯片设计任务窗格中的一个模板，这时所有的幻灯片都被应用了这个模板。

3）若只想让某张幻灯片应用模板，先选择这张幻灯片，然后把鼠标移到想要应用的模板上，出现下拉键头点击，选择“应用于选定幻灯片”，这样只有被选定的幻灯片才应用了这个模板。

4）如果希望让某个模板作为PPT启动时的默认模板，则选择“用于所有新演示文稿”。

5）如果想要使用自己制作的模板或下载的模板，点击幻灯片设计任务窗格左下角的“浏览”，在弹出的对话框中找到模板文件，双击，该模板被应用到所有幻灯片，且出现在模板列表中。

7、在幻灯片中插入对象

一张幻灯片上可以插入多个对象，幻灯片就像一个舞台，而对象就像演员一样。PPT支持的对象种类非常多，包括文字、图片、剪贴画、自选图形、艺术字、组织结构图、影片、声音、图表、表格等，正是由于种类丰富的对象，PPT才拥有了诱人的魅力。

（1)插入文本框:

插入文本框的方法是：

1）点击绘图工具栏的文本框按钮。

2）在幻灯片上单击（单行文本框）或拖动（多行文本框）。

3）输入文本框内容。

单行文本框的文字只占一行，随着输入文字的增多，文本框会向右变长；多行文本框的宽度固定，当文字输入到文本框右端会自动换行。文本框有两种状态：编辑状态和选定状态。编辑状态为斜线外框，框内有光标闪动，可以添加和删除文字；选定状态为点虚线外框，框内无光标，可以对文本框的整体进行操作，例如移动或删除整个文本框。在文本框内部单击可转为编辑状态，在文本框的框线上单击可转为选定状态。

“格式”工具栏为文字的修饰提供了帮助，从左至右分别为：字体、字号、加粗、倾斜、下划线、阴影、左对齐、居中、右对齐、分散对齐、更改文字方向、编号、项目符号、增大字号、减小字号、减少缩进量、增加缩进量、字体颜色。

字体：提供了大量的中英文字体，通过下拉菜单进行选择。

字号：控制字的大小，字号越大字越大，可以通过下拉菜单进行选择，也可直接输入字号。

加粗：使字体加粗，点击一次起作用，再次点击取消。

倾斜：使字体倾斜，点击一次起作用，再次点击取消。

下划线：为文字加下划线，点击一次起作用，再次点击取消。

阴影：为文字加阴影，点击一次起作用，再次点击取消。

左对齐：使行内文字靠左对齐。

居中：使行内文字居中对齐。

右对齐：使行内文字靠右对齐。

分散对齐：使行内文字分散排满一行。

更改文字方向：使横排文字变竖排或竖排文字变横排。

编号：为行加数字编号。

项目符号：为行加项目符号。

增大字号：点击后使被选文字字号增4。

减小字号：点击后使被选文字字号减4。

减少缩进量：点击后使光标所在行文字向左移3个英文字符位。

增加缩进量：点击后使光标所在行文字向右移3个英文字符位。

字体颜色：设置被选字体的颜色，通过下拉菜单选择，直接点击应用上次所选颜色。

使用“格式”工具栏按钮一般要求选择文字，文本框在编辑状态下可以通过拖动选择部分文字，在选中状态下相当于选择了所有文字。

（2）插入图片

图片指可被系统识别的外部位图或矢量图文件，PPT可识别的图片文件非常多，包括emf、wmf、jpg、png、bmp、gif、tif等，图片可以从网络下载，也可以使用图像处理软件制作，或者通过数码相机、扫描仪等图像输入设备获取，在插入图片前要保证该图片已保存在外存中。

插入图片的方法是：

1）单击“绘图”工具栏“插入图片”按钮。

2）在弹出的“插入图片”对话框中找到需要插入的图片，双击。

插入的图片四周有8个白色小圆，上部有一个绿色小圆，这些小圆称作“控点”。白色小圆称缩放控点，用鼠标拖动缩放控点可以调整图片的大小；绿色小圆称旋转控点，用鼠标拖动可以旋转图片。将鼠标移到图片上，鼠标指针会变成十字箭头形，拖动鼠标可移动图片，在拖动过程中，有一个虚框会随之移动，它表示图片移动的目的位置，当虚框到达目的位置。松开鼠标左键，图片即可定位。

“图片”工具栏是对图片进行简单处理的有力工具，从左至右依次为：插入图片、颜色、增加对比度、降低对比度、增加亮度、降低亮度、裁剪、向左旋转90°、线型、压缩图片、图片重新着色、设置图片格式、设置透明色、重设图片。

插入图片：与“绘图”工具栏“插入图片”按钮相同。

颜色：改变图片的颜色效果，可设置图片为灰度、黑白和冲蚀。

增加对比度：提高对比度，往往能使模糊的图像变得清晰，每单击一次，提高一点。

降低对比度：减小对比度，往往能使尖锐的图像变得柔和，每单击一次，减小一点。

增加亮度：使暗淡的图像变得明亮。

降低亮度：使过亮的图像变暗。

裁剪：剪掉无用的部分，保留有用的部分（只能保留矩形区域）。单击后，图片四周出现类似控点的短横线，拖动确定保留区域，再单击图片外空白区生效。

向左旋转90°：单击一次图片向左旋转90°。

线型：可设置图片外框线的粗细。单击，然后选择相应宽度的线条。

压缩图片：用于减小图片在演示文稿中所占的容量。

图片重新着色：可以改变矢量图的颜色（对位图不起作用）。

设置图片格式：对图片进行综合设置，可通过输入精确的数值改变图片格式。

设置透明色：用于去除图片背景，也称“抠图”。单击该按钮，然后单击图片背景，图片背景即被去除，当图片背景为纯色时效果好，否则去不净。

重设图片：单击后，图片回到刚插入时的状态，对图片做的一切修改都不起作用。

只有当选中图片后，“图片”工具栏才会出现，若选中图片后“图片”工具栏仍未出现，可右击图片，选择“显示图片工具栏”。

（3）插入剪贴画

剪贴画是Office提供的一个素材集，内含大量的矢量图和位图，可供用户直接选用。插入剪贴画的方法是：

1）单击“绘图”工具栏“插入剪贴画”按钮。

2）出现了“剪贴画”任务窗格，点击“搜索”按钮，任务窗格中会出现所有的剪贴画，单击其中一个，该剪贴画被插入到幻灯片中。

3）Office默认显示所有剪贴画，通过选择“搜索范围”和“结果类型”可以减少显示的剪贴画数量，方便筛选。

对剪贴画的操作与图片操作相类似，只不过大部分剪贴画为矢量图，矢量图的优点是缩放不失真，占用的容量小，缺点是不能使用“图片”工具栏修饰。

（4）插入自选图形

自选图形是Office系列软件的一大特色，通过使用自选图形和自选图形的组合，用户可以自己创作复杂的矢量图。在“绘图”工具栏有4个常用的自选图形：直线、箭头、矩形和椭圆，使用自选图形的一般方法是点击图形按钮，在幻灯片上拖动即可出现该图形，使用缩放控点和旋转控点调整大小和旋转角度。

Office还提供了一个自选图形集，内含几十种自选图形供用户选用，单击“绘图”工具栏“自选图形”按钮，选择其中的一个子类别，找到需要的自选图形单击，然后在幻灯片上拖动作图。

大部分自选图形都是通过拖动作图，但有两个特例，即“线条”类的“曲线”和“任意多边形”。“曲线”用于绘制带有弯度的弧线或曲边封闭图形，使用方法是：在起点单击，在需要转弯处继续单击，鼠标移动过程中曲线的形状会随着改变，在终点处双击，结束曲线绘制，若在起点处双击，则会出现曲边封闭图形；“任意多边形”用于绘制折线或多边形，使用方法是：在起点单击，在转角处继续单击，在终点处双击，结束折线绘制，若在起点处双击，则会出现多边形。

线曲线曲边封闭图形折线多边形

当形状绘制完毕后，有时需要改变形状，这就需要编辑顶点，顶点指在绘制过程中每次单击所产生的点。要编辑顶点，先选择该形状，然后单击“绘图”工具栏的“绘图”按钮，在弹出菜单中选择“编辑顶点”，这时顶点就会出现在形状上，拖动顶点就可以改变形状，编辑完后在空白处单击即可。

插入自选图形后，可以通过“设置自选图形格式”来改变图形的填充色、线条色，精确控制图形的大小、旋转角度和在幻灯片上的位置。

在图形上双击，即可打开“设置自选图形格式”对话框，该对话框有三个标签：“颜色和线条”、“尺寸”、位置。

颜色和线条：在“填充”区，单击“颜色”下拉箭头，设置填充颜色，透明度指是否能透视下层对象，透明度为0，表示完全不透明，为100表示完全透明；在“线条”区可设置线条的颜色、形状和粗细；在“箭头”区，若为非封闭图形，可设定线条两端的箭头。

尺寸：在“尺寸和旋转”区，可用数值精确设置形状的宽高和旋转度数；在“缩放比例”区，可设置宽高占原图形宽高的百分比；“锁定纵横比”复选框被选中时，高度的变化会同时导致宽度按比例变化，这将不破坏原图形的宽高比例。

位置：设置图形相对幻灯片的摆放位置，可以使用数值精确定位。

（5）插入艺术字

使用文本框输入的文字在颜色和形状上都缺乏变化，因此，Office又创造了艺术字，用于制作丰富多彩的文字。插入艺术字的方法是：

1）单击“绘图”工具栏“插入艺术字”按钮。

2）出现“艺术字库”对话框，从中选择一种艺术字，点击“确定”按钮。

3）出现“编辑艺术字文字”对话框，输入艺术字的内容，设置字体、字号，确定。

4）艺术字出现在幻灯片上，并处于选中状态。

艺术字是一种特殊的图形，对它的操作和对自选图形的操作相似，艺术字除了缩放和旋转控点外，又多了一个调整控点，这个调整控点是一个黄色的小菱形，拖动后可改变艺术字的倾斜或弯度。

“艺术字”工具栏提供了多种对艺术字的编辑操作，从左至右分别为：插入艺术字、编辑文字、艺术字库、设置艺术字格式、艺术字形状、艺术字字母高度相同、艺术字竖排文字、艺术字对齐方式、艺术字字符间距。

插入艺术字：与“绘图”工具栏“插入艺术字”按钮相同。

编辑文字：点击后弹出“编辑艺术字文字”对话框，可以修改艺术字内容，等价操作是双击艺术字。

艺术字库：点击后弹出“艺术字库”对话框，可以更换艺术字的效果。

设置艺术字格式：点击后弹出“设置艺术字格式”对话框，该对话框与“设置自选图形格式”对话框相似，可进行颜色、大小、位置方面的设置。

艺术字形状：提供了多种多样的形状供选择。

艺术字字母高度相同：使艺术字字母高度相同，仅对英文有意义。

艺术字竖排文字：使艺术字在横排和竖排之间切换。

艺术字对齐方式：当艺术字有多行时，可进行各种对齐方式。

艺术字字符间距：调整艺术字的字间距。

“艺术字”工具栏与“图片”工具栏相似，只有当选中艺术字时才会出现，若未出现，右击艺术字，选择“显示艺术字工具栏”。

（6）插入组织结构图

组织结构图表示了一种树状的隶属关系，在表示隶属、分类时经常用到。插入组织结构图的方法是：

1）单击“绘图”工具栏“插入组织结构图或其他图示”按钮。

2）在“图示库”对话框中选择“组织结构图”。

3）幻灯片上出现默认结构图，按照提示，单击图框，输入各个图框名。

“组织结构图”工具栏为修改组织结构图提供了极大的方便，它自左至右分别为：插入形状、版式、选择、适应文字、自动套用格式、显示比例。

插入形状：可以为某个图框添加下属、同事或助手。下属指下级图框，同事指同级图框，助手指本图框与下级图框之间的图框。此按钮需要下拉箭头进行选择，在使用前必须先选定一个图框，否则不可用。

版式：决定了结构图的排列方式，可以是标准、两边悬挂、左悬挂、右悬挂。在使用前必须先选中某个上层图框，使用后仅对该图框的下层图框起作用。

选择：可以对各种元素进行选择，选择后可以更改填充色、线条色或文本色。该按钮主要用于多选，若仅选择单个元素，可以直接用鼠标单击选择。

适应文字：使文字的大小匹配图框，这样就无需手动设置字号了。

自动套用格式：提供了17种预设的格式，可以直接套用。

显示比例：编辑时幻灯片的大小占实际播放时的百分比。

（7）插入影片

影片指可被系统识别的外部视频文件。PPT支持的视频文件种类非常多，包括asf、avi、mpg、wmv等，影片可从网络下载，也可从VCD截取，或者通过视频采集卡从视频源获取，在插入影片前，由于视频文件容量较大，为提高效率，应使用视频处理软件把有用部分截取出来，然后将截取出的视频文件拷贝到与PPT文件相同的文件夹中。插入影片的方法是：

1）选择菜单“插入”→“影片和声音”→“文件中的片”。 2）在弹出的插入影片对话框中找到所需插入的视频文件双击。

3）在随后弹出的对话框中选择“自动”或“在单击时”。“自动”指当播放到该张幻灯片时影片自动播放，“在单击时”指当播放到该张幻灯片时只有单击一下鼠标影片才会放。

网页轮显幻灯片是怎么做的

用JS（JavaScript）+CSS或Applet做的；

不用什么软件。

透明渐变轮番显示

制作方法：

在<head>标签下，粘贴代码：

//设置轮番显示速度 Set slideShowSpeed(milliseconds)

var slideShowSpeed= 5000;

//匀滑转换时间 Duration of crossfade(seconds)

var crossFadeDuration= 3;

//指定图像文件 Specify the image files

var Pic= new Array();

// to add more images, just continue

// the pattern, adding to the array below

Pic[0]='1.jpg'

Pic[1]='2.jpg'

Pic[2]='3.jpg'

Pic[3]='4.jpg'

Pic[4]='5.jpg'

// do not edit anything below this line

var t;

var j= 0;

var p= Pic.length;

var preLoad= new Array();

for(i= 0; i< p; i++){

preLoad= new Image();

preLoad.src= Pic;

}

function runSlideShow(){

if(document.all){

document.images.SlideShow.style.filter="blendTrans(duration=2)";

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";

document.images.SlideShow.filters.blendTrans.Apply();

}

document.images.SlideShow.src= preLoad[j].src;

if(document.all){

document.images.SlideShow.filters.blendTrans.Play();

}

j= j+ 1;

if(j>(p- 1)) j= 0;

t= setTimeout('runSlideShow()', slideShowSpeed);

}

</script>

修改body：

将表格单元格设置名称“id=VU”：

在<img>中加入代码：<img src="1.jpg" name='SlideShow'>

至此，我们的效果便制作好了。

制作方法：

1.在<head>中插入代码：

isns= navigator.appName=="Netscape";

//定义播放图片张数

img1=new Image()

img2=new Image()

img3=new Image()

img4=new Image()

img5=new Image()

//图片路径、文件名

img1.src='images/circul-side.gif'

img2.src='images/css-manual.gif'

img3.src='images/kpt7.jpg'

img4.src='images/msn.jpg'

img5.src='images/ps-

}

else

document.pic.visibility='visible'

tt=setTimeout('change_img()',4000)

}

</script>

可以在代码中按照中文介绍，修改相关信息。

2.在<body>中加载：<body onload="change_img();">

3.插入第一张图片，并命名：id="pic"

插入代码：style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'

参考图片代码：

制作完成。

观看效果

使用CSS中的revealTrans滤镜制作超弦图片的播放

CSS中有revealTrans滤镜（具体介绍请参看巧用CSS的 RevealTrans滤镜），也曾用该滤镜制作过各种图片播放的效果（类似于使用CSS滤镜revealTrans制作图片渐显效果）。知道其在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。

实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。

制作方法：

1、在<head>中插入JS代码：

function reapply(){

setTimeout("slideit()",800)

return true

}

window.onerror=reapply

</SCRIPT>

<!--

//preload images

var image1=new Image()

image1.src="images/01.jpg"

var image2=new Image()

image2.src="images/02.jpg"

var image3=new Image()

image3.src="images/03.jpg"

var image4=new Image()

image4.src="images/04.jpg"

var image5=new Image()

image5.src="images/05.jpg"

var image6=new Image()

image6.src="images/06.jpg"

var image7=new Image()

image7.src="images/07.jpg"

var image8=new Image()

image8.src="images/08.jpg"

var image9=new Image()

image9.src="images/09.jpg"

//-->

</SCRIPT>

其中：images/big完整代码：<img src="images/circul-side.gif" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>

4、给图片加超链接：<a rel="external nofollow" href="javascript:slidelink()">

5、加入代码：

<!--

////change number of images below

var number_of_images=9

//change speed below(in seconds)

var speed=3

var step=1

var whichimage=1

function slideit(){

if(!document.images)

return

if(document.all)

slide.filters.item(0).Apply()

document.images.slide.src=eval("image"+step+".src")

if(document.all)

slide.filters.item(0).Play()

whichimage=step

if(step<number_of_images)

step++

else

step=1

if(document.all)

setTimeout("slideit()",speed*1000+3000)

else

setTimeout("slideit()",speed*1000)

}

function slidelink(){

if(whichimage==1)

top.location.rel="external nofollow" href="/index.html"

if(whichimage==2)

top.location.rel="external nofollow" href="/news.html"

if(whichimage==3)

top.location.rel="external nofollow" href="/game.html"

if(whichimage==4)

top.location.rel="external nofollow" href="/music.html"

if(whichimage==5)

top.location.rel="external nofollow" href="/sport.html"

if(whichimage==6)

top.location.rel="external nofollow" href="/radio.html"

if(whichimage==7)

top.location.rel="external nofollow" href="/travel.html"

if(whichimage==8)

top.location.rel="external nofollow" href="/card.jsp"

else if(whichimage==9)

top.location.rel="external nofollow" href="/study.html"

}

</SCRIPT>

其中：各链接地址相对应<head>中插入的JS代码中的图片。

注意，页面地址必须与图片张数相对应。本教学使用九张图片，相应就放置九个超链接地址。

DHTML幻灯片播放程序

这是一个幻灯片播放程序，也就是一图片轮流播放的程序。我们在一些站点上可以看见这种形式的广告播放条，大多是用CGI做的，也就是要服务器端支持CGI程序，如ASP、PHP、 Perl等。但我们这里的实现方法无需CGI，用的仅是CSS的效果，再加上JavaScripts的控制。只要你的浏览器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不过在这里我们用到了CSS的Filter滤镜效果，该效果只能在IE中出现。有关CSS的Filter滤镜效果，大家可以参看我的《CSS中Filter滤镜详解》，该文章在Yesky.com上已经发表。好了，让我们来做点准备工作吧。

首先，为了制作这个效果，我们首先要打几个尺寸一样大小的图片，让其轮流播放。比如，我找了下面三个88x31的图片做为所用的的图片。

其次，让我们再来复习一下CSS中Filter的图片转换滤镜的知识：

CSS中的显示转换滤镜

显示转换滤镜提供的是一种更为多变的转换效果，它不像混合转换滤镜，只提供一种淡入淡出的效果，它还提供了更多的图片转换效果，它的语法是：

Filter: RevealTrans( duration=转换的秒数，transition=转换类型)

大家可以看见，它有一个转换类型的参数，这里，它提供了24种转换类型，我们只需指定转换类型的代号，就可以让图片按特有的转换效果进行转换。下表就是24种转换滤镜的形式及其对应的代号：

动态转换滤镜的属性、方法和事件

属性名说明取值

duration图像转换的延迟时间，最小单位是毫秒，也就是小数点后第三位。单位是秒，取值自然数

enabled指定是否应用滤镜效果 0表示不应用，非0表示就用。

staus传回一个转换状态 0表示转换停止

1表示显示应用的转换滤镜

2表示正在转换中

方法名说明

Apply将滤镜应用到对象上

Play开始转换

Stop停止转换

事件名说明

OnFilterChange当滤镜转变发生改变或是滤镜完成时所触发的事件

上面的CSS的转换滤镜如何被JavaScripts调用的知识我没有过多的说明，我只是列举了他的属性方法和事件。在后面，我们用 Javascript来控制他的时候，我会告诉大家如何用JavaScripts使其工作的。当然这些滤镜只能在IE4.0中浏览，NetScape不支持，不过，这并不影响netscape中的显示，只不过Netscape中不会出现图片转换的效果了。

下面，我要开始最为核心的部分了，就是编写javascript程序了。我们的思路是，可以定义一组图片（若干张），当页面出现时先显示第一张图片，并预载入第二张图片，第一张图片载入后5秒钟，如果第二张图片也载入了，我们就开始自动切换到第二张图片，此时并预载入第三张图片，如果5秒钟内我们载入了第三张图片，就自动切换到第三张图片，如此播放下去直到最后一张又从头开始。当然，这是自动播放的了。我们还允许用户手动进行向前和向后的播放。

首先，我们要解决的问题是图片的预载入，因为这决定了切换过程的流畅性和播放过程的完美性。要预载入一幅图片很简单，我们只要在内存中新建一个图片的实例变量，并把该变量指向一幅图片，这样，我们的浏览器便会自动载入这幅图片的，这就是图片的预载入。用javascript写出来就是下面这个样子：

var myImage= new Image()

myImage.src="someImage.gif"

然后，我们还要知道，图片是否载入了吗？如果载入了，我们就显示，如果没载入，那么就要出错了。于是我们还要改一下上面的代码，在其中加入两条语句，所以，这段JavaScript就变成下面的样子了：

var img= new Image()

img.onload= doReadyImage

img.onerror= doErrorDisplay

img.src="someImage.gif"

我们加入了图片的onload和onerror事件，分别代表是否预载和预载出错的事件。这两条句语必需在img.src语句的前面。否则的话，图片预载就会出错。

最后就是我们的图片切换程序了，在前面，我们复习了CSS中Filter转换滤镜的各种效果，这里我们用代号为23的随机效果，下面，是我们为在IE中这种效果所写的JavaScript程序：

if(document.images.slideShow.filters)

{

document.images.slideShow.filters[0].Stop()

document.images.slideShow.filters[0].Apply()

//使用随机的转换效果

document.images.slideShow.filters.revealTrans.transition=23

}

document.images.slideShow.src= sSource

//开始进行转换效果的执行

if(document.images.slideShow.filters)

document.images.slideShow.filters[0].Play()

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

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

步骤一

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

步骤二

在你的页首标签里，你首先要做的，就是在<STYLE>标签里指出使用的是CSS。在<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>格式有关联：

<B> Builder.com slide show!</B>

步骤七

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

</DIV>

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

步骤八

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

<B>Picture caption</B>

</FORM>

</DIV>

什么软件能制作幻灯片

问题一：做图片幻灯片用什么软件好幻灯片大部分都是用powerpoint他的简介如下：Powerpoint和Word、Excel等应用软件一样，都是Microsoft公司推出的Office系列产品之一。主要用于演示文稿的创建，即幻灯片的制作。可有效帮助演讲、教学，产品演示等。下载地址如下： sky/soft/14233希望兑你有帮助 good luck！

问题二：有哪些软件可以做幻灯片？？？ PPT,就是Power Point简称.Power Point是微软公司出品的office软件系列重要组件之一(还有Excel,Word等).

1，打开PPT，然后点击开始，点击新建幻灯片，选择喜欢的一种幻灯片，然后点击它。

2，在幻灯片中插入一些图案或者音频之类的。右击幻灯片，选择背景格式设置，点击填充，点击图片或者纹理，在这里选择喜欢的图片，然后点击应用。

3，如果你觉得这麻烦的话，也可以找人代做的，我之前公司年会总结的PPT我就做得特别烦，后来在网上找了一个叫优易做的网络团队做的，播出来的效果非常好。

问题三：有什么手机软件可以把照片做成幻灯片您好，美图秀秀可以把照片制作成幻灯片，非常的简单，美图秀秀占用内存小，而且兼容性和稳定性比较强，你可以试试，希望可以帮到你。

问题四：可以做幻灯片的是什么软件是“PowerPoint”

可以存U盘~

我没有找到官网，

你可以试试到这里下载：

xiazai.zol/search.php?keyword=PowerPoint

问题五：有没有什么好的制作幻灯片的软件 1.Prezi. Prezi是个云端的简报制作网站，让使用者可以在 Prezi网站上制作简报，甚至与许多人一同编辑同一个档案。prezi是采用故事板（storyboard）格式让演示者可以缩放图片，通过快捷的动画演示关键点。Zooming User Interface缩放式用户界面，Zooming UI的特点是界面可缩放，zoom out就能纵观全局，zoom in则可以明察细节。实现了由整体到局部的 Mindmap的开放性思维方式。动一下鼠标滚轮就可以，让读者focous到目前的重点上。以路线的呈现方式，很像电影镜头，从一个物件忽然拉到另一个物件，配合旋转更是有点动作片的感觉。2.ThinkBuzanThinkBuzan- Official Mind Mapping software by Tony Buzan

类似于mindmanager的思维导图工具，两者的商业模式不一样，前者是一个月的体验后收费，后者是根据功能点收费，基本软件是免费的。平常需要扩展思维时可以选用这款软件，有桌面版，web版，移动版。

3.ipresent（iPresent, the dynamic, interactive iPad app for sales teams）

这也是一款比较新颖的软件。彻底颠覆了以往的ppt内容组织方式和展现方式，偏向于信息图表化简洁化、视频化。很适合商业交流讨论，演讲场合。当时自己还摸索了一段时间，内容组织不是那么轻松，但真正做好了，效果还是很酷的。

4.AirSlides.这是一款收费软件，印象中好像30多块。

这款软件解决的问题：导入文件（ppt、pdf格式），演示，平板遥控。最大的亮点就是真正实现演讲者的自由，注意不是手机遥控，平板遥控和手机遥控体验上差别还是很大的。另外这款软件还有个云服务，就是可以通过浏览器把文件上传到云端服务器，然后可以随时随地下载，但是这一块过程有些体验不是很好。比如需要输入一大串字母数字的网址，以及通过平板浏览器还经常进不到云端服务器，得协助电脑浏览器才能成功上传文件。

5.SlideIdea

这是一款win8系统的ppt演示工具。有一些比较有创新的功能点。比如云端共享，异地同步，手机遥控，无线传输文件并夺取大投影屏幕等等。另外现在也陆续更新出很多有创意的交互元件，例如疑问翻牌，让整个课堂更加有趣互动。软件的有些功能交互上还需要用户自己多摸索摸索，往后有了其他系统版本，也许可以尝试尝试。（现在iOS版本也出来了，可以在app store里面搜到，新增了很多精美的ppt模板）

问题六：PPT用什么软件做？怎么做？ 1.首先准备好要做成模版的图片，打开PowerPoint并新建一个空白的PPT文档。

2.视图→母版→幻灯片母版，进入母版编辑状态。

点击绘图工具栏上的“插入图片”按钮（或按“插入→图片→来自文件”），选中要做为模版的图片，确定。并调整图片大小，使之与母版大小一致。

3.在图片上点击鼠标右键，叠放次序→置于底层，使图片不能影响对母版排版的编辑。

4.现在我们已经制作好了我们需要的模版文档，退出母版视图后，接下来就是保存了。

文件→保存，打开“另存为”对话框，在“保存类型”中选择“演示文稿设计模版”

5.此时程序将打开默认的文件保存位置，不用更改它，在“文件名”中输入一个便于你自己记忆的名字，确定保存下来。

6.现在关闭此PPT文档。再新建一个空白文档，看看你的“幻灯片设计”里，刚刚做好的模版文档是不是已经出现在那儿啦。

问题七：用什么软件做幻灯片早上收到某师弟来信，问我用什么软件做的幻灯片，貌似和Andrew Gelman的幻灯片很像。嚯哦，我能跟Gelman有点联系，三生有幸注1。实际上我只不过是用beamer而已。回想早些年，我同样是用PowerPoint（PPT注2），地球人都知道，PowerPoint的特点是“它既没有power也没有point”。用PPT最头疼的就是总是找不到好看的模板，Office自带的那几个傻了吧唧的模板早就看得恶心厌烦了；设计飞来飞去的动画又很耗时间；页面很难安排或展示章节逻辑（PPT中根本就没有这概念）；换台机器还发现页面变形了。总之是花里胡哨、吃力不讨好。它好用么？好用，傻瓜都会用。它好看么？有专家设计的模板确实也好看。你见过多少好看的？是否总是见到那个夹着公文包的洋人，或是两个握手的洋人？当然，好看与否纯粹是个主观判断。我不敢妄言PPT是否好看，只能说它不够精致。beamer是LaTeX注3的一个宏包，在学术界经常看见它的身影。其实我也只是近一年来开始大规模用它，原因仍然是LyX，以前只是偶尔在正式场合用用，还是嫌敲代码麻烦。关于计算机方面的技术问题，很多都不容易用写的方式讲清楚，这里我也不多说了，我理解的beamer除了美观之外，最重要的是逻辑。我的LaTeX入门得益于CTeX翻译的那份《不太简短的LaTeX介绍》，随后就是Google。用惯了Office的人学习LaTeX似乎都有个毛病，就是不关心警告和错误信息，几年前某师姐对我说，老师说了，遇到错误就拼命回车回车回车，只要最后能生成P龚F就行。它有个非常隐蔽的问题，估计也只有我这样无聊的人才会看到：We too是错误的写法，按照上下文，生搬硬套应该写作We neither，再顺一顺的话我觉得最好写作Neither do we。否定句中的“也”不应该是too。我向来反对无理由的口语/书面语中英文混杂（参见微波炉不work故事），这大概是避免中英文混杂的一个例证吧。话说回来，此处追究语法问题其实也没太大意义，因为中土大唐人士看到这句话肯定会正确理解它的意思，不会因为英文写得不对而不买袜子。注1：这里有个巧合。其实我刚好今天中午邀请他给我们做了报告――用Skype和电话，他在哥伦比亚，我们在Ames。Skype显示视频，电话保证声音质量，报告效果非常好，没有出现断线或听不清的情况。这事情开了一个先例，下学期可以考虑邀请更多牛人用这种方式来给我们报告了。注2：PPT不等价于幻灯片，它只是PowerPoint的缩写。这句话我重复了无数遍了。注3：说起LaTeX，最近突然发现Google对我的网站生成了Sitelinks，不关心搜索引擎优化的客观可能不知道这是什么意思或有什么意义；有时候用Google搜索一些关键词，搜索结果的第一条链接下会列出几条“站内链接”，这便叫做Sitelinks。例如搜索统计之都、统计学论坛等都会列出COS的一些站内链接。能让Google生成站内链接的网站，一般都是质量比较高（至少是搜索引擎优化做得比较好）的网站。有点王婆卖瓜的味道了，不过我要说的不是这件事，而是Google眼中的我――竟然链接之一是我的LaTeX标签。

问题八：制作幻灯片用哪个软件哪个版本好？ ppt（Microsoft Office PowerPoint） 2003咱们学校的不能用2007版的！！

问题九：什么软件可以做幻灯片? office powerpoint

wps office

这两种较常见

关于简单的幻灯片html代码和html基础语法的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。

css背景图片设置？CSS背景设置的背景图片strcmp头文件，memset头文件