运用CSS和JavaScript技术设计网页轮播图

【摘 要】运用HTML+CSS+JavaScript技术将网页的内容、外观样式及动态效果分离的设计方式正逐步取代传统的布局方式，本文中的轮播图动态效果正是基于这一设计方式。本文详细介绍了设计过程，实现了完整的轮播图的动态效果。

【关键词】轮播图；CSS；JavaScript；定时器

0 概述

轮播图是当前网页设计中经常使用的动态效果，它通过动态地变换图片来达到吸引用户注意并点击链接的目的。本文带领大家运用CSS与JavaScript的知识制作一款功能全面的网页轮播图，如图所示，当鼠标放在数字上时显示相应序号的图片，当鼠标离开时图片自动按顺序轮换。

图1 轮播图效果

1 “轮播图”设计过程

1.1 结构分析

整个显示内容分为三部分：上面的图片、下面的数字和图片底部的图片说明文字，其中图片和数字分别在

中，说明文字与图片在同一

中，为了方便整体控制，可以在外面加一个大的

。

1.2 样式分析

（1）通过最外层的大盒子对显示内容进行整体控制，需要对其设置宽度及外边距样式。

（2）为了控制数字的显示，需要对其设置宽度、高度、边框、浮动及display属性值。

（3）为了控制说明文字显示在图片左下角位置需要对其进行设置position定位。

1.3 JavaScript效果分析

（1）首先需要获取到页面上的数字元素，然后对其所在每个数组元素添加mouseover事件方法，利用数字的键值变换图片路径，需要闭包和自执行函数的语法知识，代码如下所示：

（2）为了实现鼠标移出时数字键值的自动变换从而变换图片的效果，需要运用定时器周期函数，代码如下所示：

至此，就完成了如图1所示的轮播图效果。

2 结语

利用HTML+CSS+JavaScript技术将网页的内容、外观样式及动态效果分离的设计方式正逐步取代传统的布局方式，HTML是基础架构，CSS是樣式表现，JavaScript实现网页的动态交互效果。本文中的轮播图动态效果正是基于这种设计方式实现的。

【参考文献】

[1]曾顺.前沿科技，精通JavaScript+jQuery，人民邮电出版社 2012.03.

[2]郭蕊.21天学通JavaScript，电子工业出版社，2014.01.

存入我的阅览室