应用CSS和Javascript技术实现图片轮播

郭亚东

【摘 要】 近年来网页设计技术实现了飞速的发展，而网页中的内容也不断丰富，为了增强网页的美观感，运用新技术对网页加以设计十分必要。CSS技术和Javascript技术是技术人员比较常用的两种新技术，在实现图片轮播方面具有十分重要的作用。文章中围绕CSS技术和Javascript技术实现图片轮播进行了研究，这对于信息技术的发展具有十分重要的作用。

【关键词】 CSS 计算机语言 Javascript技术 图片轮播

受信息技术发展的影响，近年来网页设计方法与技术也逐渐实现了发展，但是为了实现网页内容的优化，加强网页设计技术，也需要在网页设计中融入一些新的设计技术，例如CSS技术和Javascript技术。CSS技术和Javascript技术是实现图片轮播的重要技术，在网页设计中加以运用不仅能够提高网页设计技术水平，同时也能够进一步丰富网页内容，实现网络的快速发展。

一、轮播图片概述

当今互联网行业中，“轮播”主要是以广告轮播的形式存在，也就是某一广告位中在同一个时间段内轮流播放广告，首先映入眼帘的广告为随机出现，之后每次刷新会更换新的广告，进而确保网页中出现的每个广告频率一致。其中“图片”则包含了网页中的照片﹑拓片等基础数据。立足于现阶段互联网行业的发展现状，网页图片轮播的展现形式主要有静态、动态两种。综上所诉，“轮播图片”即在网页中以轮播的形式进行图片的播放。

二、运用CSS 技术进行轮播图片的设计

首先，技术人员要利用width 、height 属性对各个元素属性进行定义，并利用filter对几张图片的切换效果进行控制，在overflow：hidden的形式对超出规定范围的内容自动切除，通过margin-left对图片显示位置进行控制，利用no-repeat center center将控制序号居中处理，运用cursor：pointer技术将鼠标的形状改变为手形状图形，在font-family：Verdana的作用将数字更改为圆圈形式的阿拉伯数字。随后，在display：block、display：none技术的基础上，实现图片的显示以及隐藏，使其可以对Javascritp函数的调用进行适应。

一般情况下会利用以下CSS口令实现图片的轮播： Style="filter：progid：DXImagetransform.Microsoft.GradientWipe（duration=1，gradientSize=0.5，motion=forward ）//使用css濾镜控制图片切换。

三、运用Javascript技术进行轮播图片的设计

Javascript函数在网页的轮播图片设计中发挥了核心作用，Javascript设计效果的实现与函数调度之间有密不可分的关系。一般在函数切换时的主要思想核心是要先将序号作为整型参数，并将其传递给函数，对数组showNum进行定义，用其表示序号区。随后利用文档对象中所包含的getElementById 获取容器对象，基于getElementsByTagName 的形式获得容器对象中所包含的元素，将其赋值在之前所设定的showNum数组中。利用遍历数组的形式，实现序号与图片显示块“block”的对应，剩余内容分别和隐藏“none”相对应。

设计自动轮播函数的原理流程如下所示：利用setInterval对定时器进行设置，将图片切换的顺序进行选择，并默认由首张图片开始进行切换，若已经完成切换，显示最后一张图片时可以强制性返回至第一张图片重新开始轮播，这样便可以达到图片轮播的效果。除此之外，设计人员也可以利用其他技术实现网页中的图片轮播，例如Flash技术以及XML技术等，将其他技术加以运用，便可以为网页增添个性化的内容。

四、图片轮播设计基本结构

在对框架结构进行设计时，通常有上下两种结构，其中上部分结构主要作为显示图片区，而下部分区域则是对图片的说明与序号标注。将这两个部分进行连接，可以体现整体化的效果。一般情况下，下部分的图片说明区域均带有超链接作为文字说明，而图片的序号区域在设计时主要以圆圈阿拉伯数字形式为主，当鼠标放置于该序号上方，那么计算机中的鼠标便会转换为手的形状，这时图片会即刻停止播放；若是鼠标点击序号，在图片的显示区域将会对相应的图片说明加以显示；只要鼠标离开序号区，图片将会继续轮播。图片在轮播时会自动默认为由首张图片开始，在图片切换的过程中也会显示相应的切换效果。

在设计图片轮播代码时，设计人员通常会利用class=“样式名”、图片的内嵌样式、css滤镜、onmouseover=“Javascript 函数名”、onclick=“Javascript 函数名”等数据形式将CSS 与Javascript中所需要的内容加以调用，再通过相应代码的设计实现网页图片的轮播。

【结束语】

文章中重点强调了图片轮播插件设计时，所运用的CSS 与Javascript技术要点。通过CSS 与Javascript技术实现网页图片的轮播，不仅可以丰富网页的基本内容，同时也能够提高网页设计水平。在具体设计的过程中，设计人员需要对设计的框架进行构建，随后再通过一些相应的数据调用CSS 与Javascript内容，以此对网页中的图片轮播插件进行设计，以提高网页中内容的丰富性。

【参考文献】

[1] 张红琴，杨省伟. 基于CSS+JavaScript的网页下拉菜单的设计与研究[J]. 苏州大学学报（工科版），2012，02：61-66.

[2] 张红琴，陈焕英. 基于CSS和JavaScript的网页滚动字幕[J]. 长春工业大学学报（自然科学版），2012，02：165-170.

[3] 唐灿. 下一代Web界面前端技术综述[J]. 重庆工商大学学报（自然科学版），2009，04：350-355.endprint