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

龙源期刊网 https://www.sodocs.net/doc/dd5326108.html,

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

作者：郭亚东

来源：《大经贸》2017年第12期

【摘要】近年来网页设计技术实现了飞速的发展，而网页中的内容也不断丰富，为了增强网页的美观感，运用新技术对网页加以设计十分必要。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技术进行轮播图片的设计