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

在搜索相关资料的时候,查到有两种实现方式:一是使用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. SQL server 一些小结

    数据库表常用术语 关系 关系即二维表,每一个关系都有一个关系名,就是表名记录 表中的行字段 表中的列 也称属性域 取值范围关联 不同数据库表之间的数据联系关键字 属性或属性的组合,可以用于唯一标识一条 ...

  2. java中的异常处理问题。

    异常处理--基本概念 当出现程序无法控制的外部环境问题(用户提供的文件不存在,文件内容损坏,网络不可用...)时,JAVA就会用异常对象来描述. java中用2种方法处理异常: 1.在发生异常的地方直 ...

  3. 自己练习的一个小的demo的时候a标签关于href链接的问题

    一.Js的几种调用方法(参考总结的) 1.a href="javascript:js_method();" 这是常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且 ...

  4. c++错误

    run-time check failure #2-stack around the variable 'c' was corrupted错误产生的原因大多是因为程序定义了数组,存在数组越界.解决办法 ...

  5. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  6. TkbmMWClientQuery的计算字段在CalcFields事件触发次数太多

    kbmmw有两处BUG和作者提下,一个是TkbmMWClientQuery的计算字段在CalcFields事件触发次数太多,另一个是在TkbmMemTable的加载数据时字段会执行OnValidate ...

  7. rest参数与扩展运算符

    rest参数与扩展运算符 rest参数 当遇上这样一种需求:对于输入的参数,求和返回,但传入的参数个数并不确定. // 在es5中,通常是使用函数自身的arguments对象实现的 function ...

  8. C# 检查数字

    #region 检查数字 public bool IsNumeric(string value) { bool result; try { int x = int.Parse(value); resu ...

  9. ssh 无秘钥登录

    三台centos 一台服务器192.168.2.152 一台客户端192.168.2.142 一台客户端192.168.2.151 (1)产生无密钥 [root@localhost ~]#  ssh- ...

  10. NSArray NSMutableArray

    NSArray 或者 NSMUtableArray 去除重复的数据: 原来集合操作可以通过valueForKeyPath来实现的,去重可以一行代码实现: [array valueForKeyPath: ...