我的练习：使用HTML+CSS3制做图片轮播功能（不使用JavaScript）

时间 2019-12-09

标签我的练习使用 html+css3 html css 制做图片功能不使 javascript 栏目 HTML 繁體版

原文原文链接

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

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

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

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

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

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

注：由于会出现一层套一层的建立区域，代码部分若是有在某个区域内建立第二个区域的话，新建立的区域的代码部分会加粗显示。spa

先建立一个最外层的<div>做为轮播区域的容器，id=homepage：插件

HTML：
1 <body>
2     <!-- 里面有一个轮播区域 -->
3     <div id="homepage">
4     </div>
5     <!-- #里面有一个轮播区域 end -->
6 </body>

以后咱们的轮播区域都建立在这个id=homepage的<div>中了。这里稍微设置一下它的样式，这个不必定要跟我同样，我这样设置只是我本身看的舒服：code

CSS：
 1 /* 去除div区域与浏览器之间的边界 */
 2 body{
 3     margin:0px;
 4     padding:0px;
 5 }
 6 
 7 /* 最外层的div区域，里面有一个轮播区域 */
 8 #homepage {
 9     width:100%;
10     height:500px;
11     background-color:#E8E8FF;
12 }

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

在这个区域内再建立一个<div>区域，class=carousel。这个<div>至关于老式电影放映机的镜头（显示区域）：

HTML：
1 <!-- 里面有一个轮播区域 -->
2 <div id="homepage">
3     <!-- 轮播区域 -->
4     <div class="carousel">
5     </div>
6     <!-- #轮播区域 end -->
7 </div>
8 <!-- #里面有一个轮播区域 end -->

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

CSS：
 1 /* 轮播区域 */
 2 .carousel {
 3     /* 设置显示区域的宽度和高度 */
 4     width:600px;
 5     height: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。

注意：这个<div>并非直接放内容的，它跟一个空白胶片同样，轮播的内容就是照片，要拍摄后才有内容（也便是说咱们还要在“胶片”中建立<div>区域）。

HTML：
 1 <!-- 里面有一个轮播区域 -->
 2 <div id="homepage">
 3     <!-- 轮播区域 -->
 4     <div class="carousel">
 5         <!-- 轮播内容的集合 -->
 6         <div class="carousel-set">
 7         </div>
 8         <!-- #轮播内容的集合 end -->
 9     </div>
10     <!-- #轮播区域 end -->
11 </div>
12 <!-- #里面有一个轮播区域 end -->

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

CSS：
1 /* 轮播内容的集合 */
2 .carousel-set {
3     width:3000px;    /* 设置宽度为轮播内容宽度的总和 */
4     height:300px;    /* 轮播内容的高度 */
5     
6     background-color:blue;    /* 完成轮播时删除 */
7 }

此时的效果以下：

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

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

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

HTML：
 1 <!-- 里面有一个轮播区域 -->
 2 <div id="homepage">
 3     <!-- 轮播区域 -->
 4     <div class="carousel">
 5         <!-- 轮播内容的集合 -->
 6         <div class="carousel-set">
 7             <!-- 轮播的内容 -->
 8             <div class="carousel-content">
 9                 <img src="image/1.png" alt="非著名调查员:苍穹之章" />
10             </div>
11             <div class="carousel-content">
12                 <img src="image/2.png" alt="非著名调查员:苍穹之章" />
13             </div>
14             <div class="carousel-content">
15                 <img src="image/3.png" alt="非著名调查员:苍穹之章" />
16             </div>
17             <div class="carousel-content">
18                 <img src="image/4.png" alt="非著名调查员:苍穹之章" />
19             </div>
20             <div class="carousel-content">
21                 <img src="image/1.png" alt="非著名调查员:苍穹之章" />
22             </div>
23             <!-- #轮播的内容 end -->
24         </div>
25         <!-- #轮播内容的集合 end -->
26     </div>
27     <!-- #轮播区域 end -->
28 </div>
29 <!-- #里面有一个轮播区域 end -->

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

CSS：
 1 /* 轮播的内容 */
 2 .carousel-content {
 3     width:600px;
 4     height:300px;
 5     float:left;    /* 设置左浮动，让轮播内容排成一行 */
 6 }
 7 
 8 /* 轮播的内容中的<img>标签 */
 9 .carousel-content>img{
10     width:100%;
11     height: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 .carousel-set {
3     /* 应用动画 */
4     animation:playMovie 15s linear infinite;
5 }

此时运行效果已经很接近了：

再把镜头（显示区域）中的overflow:hidden;启用，就能实现咱们想要的效果了：

实例下载：

连接：https://pan.baidu.com/s/1wK2HmVbxC2ru2K78-xQECg
提取码：1pz0

复制这段内容后打开百度网盘手机App，操做更方便哦

不知道为何百度云今天创不了不用提取码的分享，只能分享个须要提取码的连接了，等啥时候能建立不须要提取码链接的时候我在换掉吧_(:з」∠)_

参考资料：

菜鸟教程 - CSS3动画：http://www.runoob.com/css3/css3-animations.html

JQuery插件库 - 纯CSS3图片轮播效果：http://www.jq22.com/jquery-info11736