<!DOCTYPE html>

<html>

<head>

  <title>纯CSS代码实现图片轮播 </title>

  <meta charset="utf-8" />

  <meta name="description" content="纯css3代码图片轮播，HTML5+CSS3精彩案例" />

  <meta name="keywords" content="HTML5，CSS3" />

  <style type="text/css">

#frame {/*----------图片轮播相框容器----------*/

position: absolute; /*--绝对定位，方便子元素的定位*/

width: 300px;

height: 200px;

overflow: hidden;/*--相框作用，只显示一个图片---*/

border-radius:5px;

}

#dis {/*--绝对定位方便li图片简介的自动分布定位---*/

position: absolute;

left: -50px;

top: -10px;

opacity: 0.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:9px;

width: calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/

}

.play{

animation: ma 20s ease-out infinite alternate;/**/

}

@keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/

0%,20% {    margin-left: 0px;    }

25%,40% {    margin-left: -300px;    }

45%,60% {    margin-left: -600px;    }

65%,80% {    margin-left: -900px;    }

85%,100% {    margin-left: -1200px;    }

}

.num{

position:absolute;z-index:10;

display:inline-block;

right:10px;top:165px;

border-radius:100%;

background:#f00;

width:25px;height:25px;

line-height:25px;

cursor:pointer;

color:#fff;

text-align:center;

opacity:0.8;

}

.num:hover{background:#00f;}

.num:hover,#photos:hover{animation-play-state:paused;}

.num:nth-child(2){margin-right:30px}

.num:nth-child(3){margin-right:60px}

.num:nth-child(4){margin-right:90px}

.num:nth-child(5){margin-right:120px}

#a1:hover ~ #photos{animation: ma1 .5s ease-out forwards;}

#a2:hover ~ #photos{animation: ma2 .5s ease-out forwards;}

#a3:hover ~ #photos{animation: ma3 .5s ease-out forwards;}

#a4:hover ~ #photos{animation: ma4 .5s ease-out forwards;}

#a5:hover ~ #photos {animation: ma5 .5s ease-out forwards;}

@keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:-0px;}    }

@keyframes ma2 {0%{margin-left:-1200px;}100%{margin-left:-300px;}    }

@keyframes ma3 {100%{margin-left:-600px;}    }

@keyframes ma4 {100%{margin-left:-900px;}    }

@keyframes ma5 {100%{margin-left:-1200px;}    }

  </style>

</head>

<body>

<div id="frame" >

<a id="a1" class="num">1</a>

<a id="a2" class="num">2</a>

<a id="a3" class="num">3</a>

<a id="a4" class="num">4</a>

<a id="a5" class="num">5</a>

<div id="photos" class="play">

  <img src="http://xxx/images/0/1.jpg" >

  <img src="http://xxx/images/0/3.jpg" >

  <img src="http://xxx/images/0/4.jpg" >

  <img src="http://xxx/images/0/5.jpg" >

  <img src="http://xxx/images/0/2.jpg" >

  <ul id="dis">

<li>中国标志性建筑：天安门</li>

<li>中国标志性建筑：东方明珠</li>

<li>中国标志性建筑：布达拉宫</li>

<li>中国标志性建筑：长城</li>

<li>中国标志性建筑：天坛</li>

  </ul>

</div>

</div>

</body>

</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. LeetCode（52）：N皇后 II

    Hard! 题目描述: n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回 n 皇后不同的解决方 ...

  2. hdu3436 splaytree树模拟队列+离散化缩点

    数据较大,需要先把每个top不会操作到的段缩成一个点,记录其开始和结束的位置,和top能操作到的点一起建立一颗伸展树模拟 然后就是普通的队列模拟操作 /* 不会被top操作到的区间就缩点 通过spla ...

  3. FakeImageExploiter v1.3

    FakeImageExploiter v1.3 - backdoor images.jpg[.ps1] CodeName: Metamorphosis Version release: v1.3 (S ...

  4. hdu 1588 求f(b) +f(k+b) +f(2k+b) +f((n-1)k +b) 之和 （矩阵快速幂）

    g(i)=k*i+b; 0<=i<nf(0)=0f(1)=1f(n)=f(n-1)+f(n-2) (n>=2)求f(b) +f(k+b) +f(2*k+b) +f((n-1)*k + ...

  5. hihocoder 1342 Full Binary Tree Picture【完全二叉树】

    转自http://www.jianshu.com/p/e37495f72cf6 hihocoder 1342 解释:题目描述了一种用ASCII码绘制的满二叉树,然后将树的根设置在一个特殊坐标轴的原点( ...

  6. springmvc文件上传下载简单实现案例(ssm框架使用)

    springmvc文件上传下载实现起来非常简单,此springmvc上传下载案例适合已经搭建好的ssm框架(spring+springmvc+mybatis)使用,ssm框架项目的搭建我相信你们已经搭 ...

  7. mysql undo 和redo 被误删除的恢复操作（一致性）

    今天在群里看到有人说不熟悉innodb把ibdata(数据文件)和ib_logfile(事务日志)文件误删除了.不知道怎么解决.当时我也不知道怎么办.后来查阅相关资料.终找到解决方法.其实恢复也挺简单 ...

  8. asp.net core配置文件

    读取配置文件 asp.net core使用appsettings.json代替传统.net framework的web.config中的<appSettings>节点.它的数据格式变成了j ...

  9. L3-020 至多删三个字符 （30 分) 线性dp

    给定一个全部由小写英文字母组成的字符串,允许你至多删掉其中 3 个字符,结果可能有多少种不同的字符串? 输入格式: 输入在一行中给出全部由小写英文字母组成的.长度在区间 [4, 1] 内的字符串. 输 ...

  10. （转）python中调用R语言通过rpy2 进行交互安装配置详解

    python中调用R语言通过rpy2 进行交互安装配置详解(R_USER.R_HOME配置) 2018年11月08日 10:00:11 luqin_ 阅读数:753   python中调用R语言通过r ...