以4张图片为例:
1.基本布局:
将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div,
相框设置1个图片的大小并设置溢出隐藏,以保证正确显示一个照片。
2.设置动画:
然后使用css3动画,通过对photos进行位移,从而达到显示不同的图片,每次偏移一个图片的宽度,即可显示下一张图片。
4张图片,需要切换3次.
根据需要可以对各个图片添加相应的序号和图片简介。 3.代码如下:
 <style>
#frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
#dis{position:absolute;left:-50px;top:-10px;opacity:.5}
#dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
#photos img{float:left;width:300px;height:200px}
#photos { position: absolute;z-index:; width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/ }
.play{ animation: ma 20s ease-out infinite alternate;}
@keyframes ma {
0%,25% { margin-left: 0px; }
30%,50% { margin-left: -300px; }
55%,75% { margin-left: -600px; }
80%,100% { margin-left: -900px; } }
</style>
<div id="frame" >
<div id="photos" class="play">
<img src="data:images/1.jpg" >
<img src="data:images/3.jpg" >
<img src="data:images/4.jpg" >
<img src="data:images/5.jpg" >
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div>
												

纯CSS3代码实现简单的图片轮播的更多相关文章

  1. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  2. css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  5. html+jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  6. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  7. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  8. 用Vue实现一个简单的图片轮播

    本文已收录至https://github.com/likekk/studyBlog欢迎大家star,共同学习,共同进步.如果文章有错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和 ...

  9. js最简单焦点图片轮播代码

    将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...

随机推荐

  1. MySQL Router 测试使用 转

    MySQL Router 测试使用 . 特性 MySQL Router 并没有包括一些特别新的特性, 总体上看中规中矩, 不过 first-available 和插件两个特性挺有意思, 后续会进行讲解 ...

  2. Hidden Markov Model

    Markov Chain 马尔科夫链(Markov chain)是一个具有马氏性的随机过程,其时间和状态参数都是离散的.马尔科夫链可用于描述系统在状态空间中的各种状态之间的转移情况,其中下一个状态仅依 ...

  3. SVN 修改URL路径

    http://strugglelinux.blog.51cto.com/1009905/672008 标签:休闲 SVN 修改URL路径 职场 原创作品,允许转载,转载时请务必以超链接形式标明文章 原 ...

  4. json对象,使用 “ . ”获取值是,不能使用变量作为属性名。

    var he={'aa':"aa",'bb':'bb'}; var chun={'cc':"aa",'dd':'mm'}; c=he.aa; n=chun.c; ...

  5. PHP下获取上个月、下个月、本月的日期(strtotime,date)

    今天写程序的时候,突然发现了很早以前写的获取月份天数的函数,经典的switch版,但是获得上月天数的时候,我只是把月份-1了,估计当时太困了吧,再看到有种毛骨悚然的感觉,本来是想再处理一下的,但是一想 ...

  6. struts2简单示例

    今天写一个struts2的例子,目的是为了让大家明白struts2的基本流程,其实框架没有大家想象的那么难,说白了struts2的本质就是一个大的Servlet,即原本需要提交到Servlet处理的部 ...

  7. JSONP与JSON的关系

    这篇文章<说说JSON和JSONP,也许你会豁然开朗>写得非常棒,推荐一下 http://kb.cnblogs.com/page/139725/ (大神,对不起,我记录一下,因为你写的真得 ...

  8. sql语句判断方法之一

    sql语句判断方法之一CASE语句用法总结 背景: Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN ' ...

  9. java+mysql实现保存图片到数据库,以及读取数据库存储的图片

    一:建表 二:获取数据库连接 1:导入mysql的驱动jar包,mysql-connector-java-5.1.8-bin.jar 2:写代码连接数据库,如下: /** * */ package c ...

  10. LeetCode 238

    Product of Array Except Self Given an array of n integers where n > 1, nums, return an array outp ...