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

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

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

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

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

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

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

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

HTML：
1 <body>

     <!-- 里面有一个轮播区域 -->

     <div id="homepage">

     </div>

     <!-- #里面有一个轮播区域 end -->

 </body>

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

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

 body{

     margin:0px;

     padding:0px;

 }

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

 #homepage {

     width:100%;

     height:500px;

     background-color:#E8E8FF;

 }

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

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

HTML：
1 <!-- 里面有一个轮播区域 -->

 <div id="homepage">

     <!-- 轮播区域 -->

     <div class="carousel">

     </div>

     <!-- #轮播区域 end -->

 </div>

 <!-- #里面有一个轮播区域 end -->

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

CSS：
 1 /* 轮播区域 */

 .carousel {

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

     width:600px;

     height:300px;

     /* 隐藏溢出的内容

     overflow:hidden; */

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

     position:relative;

     top:50%;

     left:50%;

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

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

 }

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

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

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

HTML：
 1 <!-- 里面有一个轮播区域 -->

 <div id="homepage">

     <!-- 轮播区域 -->

     <div class="carousel">

         <!-- 轮播内容的集合 -->

         <div class="carousel-set">

         </div>

         <!-- #轮播内容的集合 end -->

     </div>

     <!-- #轮播区域 end -->

 </div>

 <!-- #里面有一个轮播区域 end -->

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

CSS：
1 /* 轮播内容的集合 */

 .carousel-set {

     width:3000px;    /* 设置宽度为轮播内容宽度的总和 */

     height:300px;    /* 轮播内容的高度 */

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

 }

此时的效果如下：

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

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

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

HTML：
 1 <!-- 里面有一个轮播区域 -->

 <div id="homepage">

     <!-- 轮播区域 -->

     <div class="carousel">

         <!-- 轮播内容的集合 -->

         <div class="carousel-set">

             <!-- 轮播的内容 -->

             <div class="carousel-content">

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

             </div>

             <div class="carousel-content">

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

             </div>

             <div class="carousel-content">

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

             </div>

             <div class="carousel-content">

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

             </div>

             <div class="carousel-content">

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

             </div>

             <!-- #轮播的内容 end -->

         </div>

         <!-- #轮播内容的集合 end -->

     </div>

     <!-- #轮播区域 end -->

 </div>

 <!-- #里面有一个轮播区域 end -->

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

CSS：
 1 /* 轮播的内容 */

 .carousel-content {

     width:600px;

     height:300px;

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

 }

 /* 轮播的内容中的<img>标签 */

 .carousel-content>img{

     width:100%;

     height:100%;

 }

此时的运行效果如下：

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

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

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

CSS：
 1 /* keyframes规则 */

 @keyframes playMovie {

     0% {margin-left:0px;}

     10% {margin-left:0px;}

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

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

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

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

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

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

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

 }

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

CSS：
1 /* 轮播内容的集合 */

 .carousel-set {

     /* 应用动画 */

     animation:playMovie 15s linear infinite;

 }

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

再把镜头（显示区域）中的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

个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）的更多相关文章

  1. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  2. axure 动态面板制作图片轮播 （01图片轮播）

    利用Axure的动态面板组件制作图片轮播: 首先现在操作区添加一个动态面板组件: 鼠标放在动态面板上,右键单击选择面板状态管理,给动态面板设置名称并添加两条状态然后点击确定. 双击动态面板,然后双击s ...

  3. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  4. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  6. CSS快速制作图片轮播的焦点

    来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...

  7. CSS高速制作图片轮播的焦点

    来源:http://www.ido321.com/858.html 效果图: 演示地址:http://jsfiddle.net/Web_Code/q5qfd8aL/embedded/result/ 代 ...

  8. 基于bootstrap的图片轮播功能

    插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...

  9. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

随机推荐

  1. Tensorflow实战系列之四：

    这个是第四篇,打算写一些语义分割的内容实战.

  2. 零基础学习JavaSE（二）——基础语法

    二.Java 基础语法 2.1 Java 基础语法 java是一个面向对象的程序语言,及可把一切事物当做对象处理,而java的事物中最小的就是class (类),类中有方法,类可以创建对象,并且有一些 ...

  3. python基础（字典）

    #实现同样的功能,代码越少越好#非空即真,非0即真#not 取反 a = []b = ' 'c = ()d = 0e = Noneif a: print('真的')else: print('假的') ...

  4. Java面试题集锦（持续更新）

    1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: -抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪些属性和行为,并不关注这 ...

  5. elasticsearch（1） 安装和使用

    一.简介 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. 但是 ...

  6. C#中异步使用及回调

    1. 一句话理解异步 我叫你去吃饭,叫完你不去,那我就会一直等你,直到你和我一起去吃饭.这叫同步! 我叫你去吃饭,叫完不管你去不去,我都不会等你,我自己去吃饭.这叫异步! 2. 异步使用 static ...

  7. 《A Knowledge-Grounded Neural Conversation Model》

    abstract 现在的大多数模型都可以被应用在闲聊场景下,但是还没有证据表明他们可以应用在更有用的对话场景下.这篇论文提出了一个知识驱动的,带有背景知识的神经网络对话系统,目的是为了在对话中产生更有 ...

  8. IP通信基础课堂笔记----第一章（重点）

    七层数据传输:应用层.表示层.会话层.传输层.网络层.数据链路层.物理层 1.物理层:设备----集线器.Hub 两台主机的最大跨度----2500m 在物理层工作----(1)所有设备都处于同一冲突 ...

  9. 18-09-11 软件rpm yum rm卸载 和批量删除

    一 在Linux下删除文件用rm命令,具体用法如下: rm [选项] 文件 选项说明: -f -force 忽略不存在的文件,强制删除,无任何提示 -i --interactive 进行交互式地删除 ...

  10. 设置Linux系统的LANG变量

    设置linux系统的LANG变量 对于国内的Linux用户,经常烦恼的一个问题是:系统常常在需要显示中文的时候却显示成了乱码,而由于某些原因,需要英文界面的系统的时候,却苦于系统不能正常输入和显示中文 ...