1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> 飛天网事--纯CSS代码实现图片轮播 </title>
  5. <meta charset="utf-8" />
  6. <meta name="description" content="飛天网事，WEB前端开发，纯css3代码图片轮播，HTML5+CSS3精彩案例" />
  7. <meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />
  8. <meta name="author" content="R.tian @eduppp.cn 2015">
  9. <link rel="shortcut icon"  href="http://eduppp.cn/images/logo4.gif" />
  10. <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
  11. <style type="text/css">
  12. #frame {/*----------图片轮播相框容器----------*/
  13. position: absolute; /*--绝对定位，方便子元素的定位*/
  14. width: 300px;
  15. height: 200px;
  16. overflow: hidden;/*--相框作用，只显示一个图片---*/
  17. border-radius:5px;
  18. }
  19. #dis {/*--绝对定位方便li图片简介的自动分布定位---*/
  20. position: absolute;
  21. left: -50px;
  22. top: -10px;
  23. opacity: 0.5;
  24. }
  25. #dis li {
  26. display: inline-block;
  27. width: 200px;
  28. height: 20px;
  29. margin: 0 50px;
  30. float: left;
  31. text-align: center;
  32. color: #fff;
  33. border-radius: 10px;
  34. background: #000;
  35. }
  36. #photos img {
  37. float: left;
  38. width:300px;
  39. height:200px;
  40. }
  41. #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
  42. position: absolute;z-index:9px;
  43. width: calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/
  44. }
  45. .play{
  46. animation: ma 20s ease-out infinite alternate;/**/
  47. }
  48. @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
  49. 0%,20% {        margin-left: 0px;       }
  50. 25%,40% {       margin-left: -300px;    }
  51. 45%,60% {       margin-left: -600px;    }
  52. 65%,80% {       margin-left: -900px;    }
  53. 85%,100% {      margin-left: -1200px;   }
  54. }
  55. .num{
  56. position:absolute;z-index:10;
  57. display:inline-block;
  58. right:10px;top:165px;
  59. border-radius:100%;
  60. background:#f00;
  61. width:25px;height:25px;
  62. line-height:25px;
  63. cursor:pointer;
  64. color:#fff;
  65. text-align:center;
  66. opacity:0.8;
  67. }
  68. .num:hover{background:#00f;}
  69. .num:hover,#photos:hover{animation-play-state:paused;}
  70. .num:nth-child(2){margin-right:30px}
  71. .num:nth-child(3){margin-right:60px}
  72. .num:nth-child(4){margin-right:90px}
  73. .num:nth-child(5){margin-right:120px}
  74. #a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}
  75. #a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}
  76. #a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}
  77. #a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}
  78. #a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}
  79. @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:-0px;} }
  80. @keyframes ma2 {0%{margin-left:-1200px;}100%{margin-left:-300px;}   }
  81. @keyframes ma3 {100%{margin-left:-600px;}   }
  82. @keyframes ma4 {100%{margin-left:-900px;}   }
  83. @keyframes ma5 {100%{margin-left:-1200px;}  }
  84. </style>
  85. </head>
  86. <body>
  87. <div id="frame" >
  88. <a id="a1" class="num">1</a>
  89. <a id="a2" class="num">2</a>
  90. <a id="a3" class="num">3</a>
  91. <a id="a4" class="num">4</a>
  92. <a id="a5" class="num">5</a>
  93. <div id="photos" class="play">
  94. <img src="http://eduppp.cn/images/0/1.jpg" >
  95. <img src="http://eduppp.cn/images/0/3.jpg" >
  96. <img src="http://eduppp.cn/images/0/4.jpg" >
  97. <img src="http://eduppp.cn/images/0/5.jpg" >
  98. <img src="http://eduppp.cn/images/0/2.jpg" >
  99. <ul id="dis">
  100. <li>中国标志性建筑：天安门</li>
  101. <li>中国标志性建筑：东方明珠</li>
  102. <li>中国标志性建筑：布达拉宫</li>
  103. <li>中国标志性建筑：长城</li>
  104. <li>中国标志性建筑：天坛</li>
  105. </ul>
  106. </div>
  107. </div>
  108. </body>
  109. </html>

《借鉴地址：http://blog.csdn.net/rtian001/article/details/48474677》

使用纯css3实现图片轮播的更多相关文章

  1. 个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

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

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

  3. 纯CSS 多图片轮播

    今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...

  4. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

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

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

  6. css3 网页图片轮播的实现

    .lunbo{ height: 640px; width: 100%; background-position: -280px; margin-top: 103px; -webkit-animatio ...

  7. HTML图片轮播

    一.纯 CSS 实现图片轮播 引自原文作者:南张人 原文链接:https://blog.csdn.net/u011848617/article/details/80468463 理论基础 CSS3 a ...

  8. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

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

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

随机推荐

  1. ES 6 : 数组的扩展

    1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)对象. 下面是一个类似数组的对象,Array.from将它转为真正的数组. ...

  2. WinForm 无边框窗体和timer控件

    一.无边框窗体 1.控制按钮如何制作就是放置可以点击的控件,不局限于使用按钮或是什么别的,只要可以点击能触发点击事件就可以了 做的好看一点,就是鼠标移入,移出,按下三个事件会让按钮改变样式 如何获取图 ...

  3. 主机无法访问虚拟机的httpd服务

    症状:虚拟机装的centos6.3 通过桥接的方式与主机连接 虚拟机通过yum安装httpd服务 在主机浏览器中输入 虚拟机ip  无法访问虚拟机Apache 虚拟机和主机可以相互ping通 解决:关 ...

  4. x264中的帧类型、条带类型、数据分区(data partition)

    1 条带类型(slice type) x264的条带有三种基本类型分别为:I(主要用于帧内图像编码).P(用于帧间前向参考预测图像编码).B(用于帧间双向参考预测图像编码).SI与SP(切换码流时用) ...

  5. 一、java自带的观察者模式

    Observer对象是观察者,Observable对象是被观察者. 官网api文档:http://docs.oracle.com/javase/7/docs/api/ 1. 实现观察者模式 实现观察者 ...

  6. 最近遇到的两个IE下的问题(IE兼容问题)

    最近遇到了两个IE下的兼容问题(产品目前还需要兼容IE8,所以没办法,运行效果虽然不好,但是也仍然兼容着吧) 问题描述: 1, 在更改IE窗口的时候,反应非常慢,甚至卡死 2, 在chrome运行正常 ...

  7. angular localStorage使用方法

    var YourCtrl = function($scope, localStorageService, ...) { // To add to local storage localStorageS ...

  8. javascript函数作用域实践

    在es6之前,JavaScript是没有块级作用域的,只有函数作用域,也就是说是一个function里面定义的变量外面取不到的:而if for是条件判断的语句,不是函数,由于缺少块级作用域,所以条件中 ...

  9. 安装mysql的遇到的问题

    源:安装用的是mysql官网的binary包. 之前装mysql都是直接放到/usr/local,就想试试放到其他地方,然后..就悲剧了. 安装步骤没啥说的,官网上有.因为放置的位置不一样所以有些执行 ...

  10. Digi. Certificates: Key pairs usages

    In short, we have some sort of algorithms to gen pair of private and public keys. The public key is ...