吴瑕

摘要：在Web应用成为绝对主流的大背景下，友好的动画交互可以给访客带来更好的浏览体验，因此网站前端开发的重要性也越来越凸显。本文就对网站前端开发的一个经典实例进行介绍：用Javascript DOM脚本在网站主页实现幻灯片动画。

关键词：Javascript DOM;幻灯片动画

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2021）04-0207-02

1 引言

由于大多数访客都会首先访问网站主页，所以在主页加入一些友好的动画效果让页面更加炫酷，是当前网站前端开发的一种流行趋势。因此网站前端开发技术也是网站开发人员学习和应用的一个重点技术。本文就对教学中实现的一个Javascript DOM主页幻灯片动画进行详细介绍。

2 設计与实现

2.1布局主页

先通过编写HTML完成主页内容，再通过CSS定义布局和颜色。主页效果如图1所示，当鼠标经过导航条，导航条下面的图片以幻灯片播放效果快速流畅的切换成对应图片，如图2，当鼠标移动到“Live”，图片切换成对应小图。当鼠标放到“intro”段落中的链接上时，也会触发同样的幻灯片动画。HTML代码如下：

因为本文重点介绍JS实现，考虑到篇幅，CSS代码省略。这里值得注意以下几点：

1）为了让导航中的链接水平排列，需要使用浮动布局。2）首先要为HTML5块元素定义默认样式，即使是那些不支持的浏览器，也能让这些元素都具有适当的块布局。3）使用通配选择器把所有元素的内外边距设置为零以确保不同浏览器有相同显示效果。

2.2 编写JavascriptDOM脚本

实现本例的幻灯片动画效果，需要编写3个函数，分别是：insertAfter（），moveE（），prepareSlideshow（），将这三个函数单独保存为一个JS文件，在主页中引入该JS文件。……