技术经验解读：个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

先上效果图，不要在意用来当素材的图片：

在搜索相关资料的时候，查到有两种实现方式：一是使用JavaScript，二是使用CSS3中的Animation（动画），这里使用的是CSS3中的Animation实现的图片轮播功能。

首先我们要理解这个图片轮播的结构，我一早上都因为没有理解结构在那里浪费时间，中午睡了一觉起来思路就通了，就。。。做出来了┑(￣Д ￣)┍

其实就和老式电影放映机差不多原理，要显示的内容就是胶片上的一张张照片，并排排列：

轮播起来就像播放老式电影一样，胶片移动，显示区域会显示想要显示的那张照片：

我理解的轮播的原理就到这里为止了，接下来是实战部分。

注：因为会出现一层套一层的创建区域，代码部分如果有在某个区域内创建第二个区域的话，新创建的区域的代码部分会加粗显示。

先创建一个最外层的作为轮播区域的容器，id=homepage：

HTML：

1 [/span>body

2

3 [/span>div id="homepage"

4

5

6

之后我们的轮播区域都创建在这个id=homepage的中了。这里稍微设置一下它的样式，这个不一定要跟我一样，我这样设置只是我自己看的舒服：

CSS：

1 / 去除div区域与浏览器之间的边界 /

2 body{

3 margin:0px;

4 padding:0px;

5 }

6

7 / 最外层的div区域，里面有一个轮播区域 /

8 #homepage //代码效果参考：http://www.jhylw.com.cn/483823293.html

9 Width＜/span>:100%;

10 Height＜/span>:500px;

11 background-color:#E8E8FF;

12 }

就一片灰我就不截效果了。

在这个区域内再创建一个区域，class=carousel。这个相当于老式电影放映机的镜头（显示区域）：

HTML：

1

2 [/span>div id="homepage"

3

4 [/span>div class="carousel"

5

6

7

8

设置CSS样式让它居中在页面中显示：

CSS：

1 / 轮播区域 /

2 .carousel {

3 / 设置显示区域的宽度和高度 /

4 Width＜/span>:600px;

5 Height＜/span>:300px;

6 / 隐藏溢出的内容

7 overflow:hidden; /

8

9 / 居中显示这个div区域 /

10 position:relative;

11 top:50%;

12 left:50%;

13 transform:translate(-50%,-50%);

14

15 background-color:black; / 完成轮播时删除 /

16 }

镜头（显示区域）的大小和胶片上的照片（轮播的内容）的大小是一致的。这里的overflow先注释，先不用，等会看到胶片（轮播内容的集合）的效果后再启用。此时页面是这样的：

接下来我们在镜头（显示区域）中创建胶片（显示内容的集合），class=carousel-set。

注意：这个并不是直接放内容的，它跟一个空白胶片一样，轮播的内容就是照片，要拍摄后才有内容（也即是说我们还要在“胶片”中创建区域）。

HTML：

1

2 [/span>div id="homepage"

3

4 [/span>div class="carousel"

5

6 [/span>div class="carousel-set"

7

8

9

10

11

12

然后设置一下CSS的样式，假设我们要显示四张照片，那我们就给它预留五张照片的位置（宽度），第五张和第一张相同，要给人一种无缝循环的感觉：

CSS：

1 / 轮播内容的集合 /

2 .carousel-set {

3 Width＜/span>:3000px; / 设置宽度为轮播内容宽度的总和 /

4 Height＜/span>:300px; / 轮播内容的高度 /

5

6 background-color:blue; / 完成轮播时删除 /

7 }

此时的效果如下：

因为宽度太长了，甚至超出了浏览器的范围。这个不用担心，我们之前在镜头（显示区域）的样式中有设置了overflow，只是暂时注释掉了而已，后面胶片（显示内容的集合）效果出来后我们再启用overflow。

胶片（显示内容的集合）准备好了，接下来就是胶片上的内容，也就是照片（显示内容）啦。

在胶片（显示内容的集合）中，创建我们的照片（显示内容）的。可能会有人问（不，不会有人问的的）：为啥是一个不直接上呢？你想想，我们用，那我们可不止能显示照片，我们还能显示文字，或者放个超链接等等，可以扩展嘛。我们准备显示四张照片，那我们就创建五张照片的位置（区域），第五张和第一张相同，要给人一种无缝循环的感觉：

HTML：

1

2 [/span>div id="homepage"

3

4 [/span>div class="carousel"

5

6 [/span>div class="carousel-set"

7

8 [/span>div class="carousel-content"

9 [/span>img src="image/1.png" alt="非著名调查员:苍穹之章" />

10

11 [/span>div class="carousel-content"

12 [/span>img src="image/2.png" alt="非著名调查员:苍穹之章" />

13

14 [/span>div class="carousel-content"

15 [/span>img src="image/3.png" alt="非著名调查员:苍穹之章" />

16

17 [/span>div class="carousel-content"

18 [/span>img src="image/4.png" alt="非著名调查员:苍穹之章" />

19

20 [/span>div class="carousel-content"

21 [/span>img src="image/1.png" alt="非著名调查员:苍穹之章" />

22

23

24

25

26

27

28

29

这里顺便将要轮播的图片加上去了，因为纯色。。。不太好分辨内容间的间隔（虽然的素材黑边本来就不好分别，不要在意这些细节）然后设置一下CSS样式，让胶片（轮播内容的集合）成型：

CSS：

1 / 轮播的内容 /

2 .carousel-content {

3 Width＜/span>:600px;

4 Height＜/span>:300px;

5 float:left; / 设置左浮动，让轮播内容排成一行 /

6 }

7

8 / 轮播的内容中的标签 /

9 .carousel-content>img{

10 Width＜/span>:100%;

11 Height＜/span>:100%;

12 }

此时的运行效果如下：

是不是就有种胶片（内容的集合）的感觉啦，接下来我们尝试让这个胶片（内容的集合）移动。接下来就到这边文章的主角——CSS3中的Animation出场了！

Animation这里就不做过多介绍，毕竟这个笔记是介绍实现轮播功能，不是介绍Animation的。接下来步骤不理解的话建议去看一下Animation的一些资料。

我们先创建CSS3的@keyframes规则，这个规则和关键帧很像，比如一个动画，在播放到50%的时候是一个关键帧，播放到100%的时候是一个关键帧，关键帧之间有补帧，让动画看起来更加流畅。

CSS：

1 / keyframes规则 /

2 @keyframes playMovie {

3 0% {margin-left:0px;}

4 10% {margin-left:0px;}

5 20% {margin-left:-600px;}

6 40% {margin-left:-600px;}

7 50% {margin-left:-1200px;}

8 70% {margin-left:-1200px;}

9 80% {margin-left:-1800px;}

10 90% {margin-left:-1800px;}

11 100% {margin-left:-2400px;}

12 }

这里采用的是修改胶片（显示内容的集合）的左侧外边距的方式来移动胶片（显示内容的集合）。接下来我们在胶片的CSS样式表中应用这个动画规则：

CSS：

1 / 轮播内容的集合 /

2 .c