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

html-轮播图的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

  10. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. Linux在bash history当中添加timestamp

    执行以下两条命令即可 echo 'export HISTTIMEFORMAT="%y-%m-%d %T "' >> /etc/profile source /etc/p ...

  2. LeetCode（43）：字符串相乘

    Medium! 题目描述: 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = &quo ...

  3. cf 1082abc

    还是菜,两题dp一题模拟 /* 反正就两个方向,往左或者往右,如果都不行,那就是-1 */ #include<bits/stdc++.h> using namespace std; int ...

  4. 性能测试十四：Xshell链接linux虚拟机

    一.先装一个linux虚拟机 VBox+centos1.先下载Linux镜像文件的ovf或者OVA文件2.打开vbox,点击菜单栏“管理”-“导入虚拟电脑3.选择解压路径中的ovf或者OVA文件,点击 ...

  5. jmeter常用组件

    测试计划(Test Plan) 是使用 JMeter 进行测试的起点,它是其它 JMeter 测试元件的容器. 线程组(Thread Group) 代表一定数量的并发用户,它可以用来模拟并发用户发送请 ...

  6. LICEcap方便快捷制作gif图片的工具

    总是看见别人的博客里面动态的小图片,是不是有种冲动自己也想搞,但是就是不知道咋搞,这里简单介绍一款很实用的制作gif的软件. LICEcap的网址:http://www.cockos.com/lice ...

  7. bzoj1026

    题意: windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道,在A和B之间,包括A和B,总共有多少个windy数? 数据范围  A,B≤ ...

  8. Swagger 常用注解

    一.Swagger常用注解 1.与模型相关的注解 两个注解: @ApiModel:用在模型类上,对模型类做注释: @ApiModelProperty:用在属性上,对属性做注释 2.与接口相关的注解 六 ...

  9. Python 模块介绍

    一.模块:用一坨代码实现了某个功能的代码集合. 二.模块分为三种 1.自定义模块 2.内置标准模块(又称标准库) 3.开源模块(上传方式,百度PyPi) 开源模块安装方式: a.yum b.pip c ...

  10. 6-9 天平 uva839

    这题十分巧妙!!代码精简!强大的递归!!! 边读边判断   先读到底部  慢慢往上判断   难点在于传递w1+w2 有一个比LRJ更加简便的方法  return传递  全局变量判断 #include ...