网页中图片轮播效果的实现方法

众多网站铺天盖地，如产品宣传类、企业文化类、印象城市类、地域风土人情类、摄影赏析类等等，在页面的各种动态效果中，图片轮播效果的使用程度非常高。所谓轮播，是指在电脑浏览器中通过鼠标点击，触屏设备中通过手指滑动，或设置定时器等方式使得数张图片在同一个位置有规律地滚动播放，通过动态地变换图片来达到吸引用户注意并点击链接的 目的，让用户接受讯息的同时，享受网页设计带来的美学效应。

一、轮播效果概述

（1）示例效果

本文示例的轮播效果为入门级：三张图片以淡入效果（透明度逐渐变小）的方式依次显示，第三张图片播放结束后自动显示第一张，每张图片的间隔时间一致，达到轮播的效果。

（2）设计原理

运用 HTML、CSS、JavaScript 三大语言，完成整个轮播效果从布局到运行的实现，吸引更多用户进行访问。其中HTML 搭建总体框架，CSS用来控制网页外观的规则，增加网页的外观效果（包括透明、边框等），JavaScript 辅助用户得到更好的画面效果，同时保证代码和内容的分离。

二、设计过程

1. HTML布局

HTML （Hyper Text Markup Language）为超文本标记语言，它用来定义网页内容的含义和结构。

以三张图片（001.jpg，002.jpg，003.jpg）轮播为例，将每张图片的地址作为列表项内容放入无序列表中，为了保持循环，可以在三张结束后继续添加两张。以上所有元素都放在一个大的 div 容器中，名称为 box。

<div class="box" id="apDiv1">

<ul>

<li><img src="001.jpg" width="1350" height="500"></li>

<li><img src="002.jpg" width="1350" height="500"></li>

<li><img src="003.jpg" width="1350" height="500"></li>

<li><img src="001.jpg" width="1350" height="500"></li>

<li><img src="002.jpg" width="1350" height="500"></li>

</ul>

</div>

对具体放置图片的apDiv1图层进行属性设置，高度500px、宽度1350px都和一张图片大小保持一致，并对其在网页中的位置进行了精准定位。

#apDiv1 {

position： absolute;

width： 1350px;

height： 500px;

z-index： 1;

left： 204px;

top： 143px;

}

2. CSS 样式

CSS （Cascading Style Sheets）为层叠样式表，是一种用来表现 HTML 或 XML 等文件样式的计算机语言。

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

*{margin：0;

padding：0;

}

.box{

width： 6750px;

height： 500px;

border：10px solid #3CC;

overflow：hidden;

}

（2）设置大盒子box内的放置图片的容器大小，宽度和box一致，也和HTML中设置的五张图片总宽度对应。同时设置每张图片的出场时间为8秒。

.box ul {

height： 100%;

width： 6750px;

list-style：none;

animation：move 8s infinite ;

}

.box li {

height： 100%;

width： 1350px;

float：left;

}

.box li img{

width： 100%;

}

.box-div {

position：absolute;

width： 1350px;

display：flex;

bottom：20px;

left：40%

}

3.JavaScript 语句

JavaScript一种直译式脚本语言，用来给HTML网页添加各式各样的动态效能，为用户 提供更流畅美观的浏览效果，在Web页面开发中被广泛运用。

最为关键的淡入出场效果由JavaScript语句实现，示例设置每张图片由0.5-0.9-1淡入出现，opacity的值即为透明度。同时要对图片的出场时间进行计算，三张图片意味着每张占用约33.3%，在第一张出场（从右至左，为-1350px）完成后，第二张接着出场（从右至左，为-2750px……以此类推。

@keyframes move

{

0%{transform：translate（0，0）;opacity：0.5;}

15%{transform：translate（-1350px，0）;opacity：0.5;}

30%{transform：translate（-1350px，0）;opacity：0.9;}

33.3%{transform：translate（-1350px，0）;opacity：1;}

45%{transform：translate（-2700px，0）;opacity：0.5;}

63%{transform：translate（-2700px，0）;opacity：0.9;}

66.6%{transform：translate（-2700px，0）;opacity：1;}

80%{transform：translate（-4050px，0）;opacity：0.5;}

96%{transform：translate（-4050px，0）;opacity：0.9;}

99.9%{transform：translate（-4050px，0）;opacity：1;}

}

三、结语

在互联网飞速发展的当下，网页设计看似一项简单的工作，其实不然，设计出有特点、吸引浏览者的网页，恰恰需要进行精心设计。本文运用 HTML、CSS、JavaScript 三大语言，轻松实现一种常用且简单的图片轮播效果，让网页充满生命力，带来良好的美学效应和用户体验效果。

参考文献：

［1］周芷仪，陈 婷.浅谈网页中实现图片轮播图效果的方法[J].软件.2018.

基金项目：《网页设计》省级线上一流课程建设项目阶段性研究成果

1.作者简介：黄克军，男，讲师，硕士，研究方向为教育技术应用。