使用纯css3实现图片轮播

<!DOCTYPE html>
<html>
<head>
<title> 飛天网事--纯CSS代码实现图片轮播 </title>
<meta charset="utf-8" />
<meta name="description" content="飛天网事，WEB前端开发，纯css3代码图片轮播，HTML5+CSS3精彩案例" />
<meta name="keywords" content="飛天网事，WEB前端开发，HTML5，CSS3，jQuery，" />
<meta name="author" content="R.tian @eduppp.cn 2015">
<link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" />
<link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
<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://eduppp.cn/images/0/1.jpg" >
<img src="http://eduppp.cn/images/0/3.jpg" >
<img src="http://eduppp.cn/images/0/4.jpg" >
<img src="http://eduppp.cn/images/0/5.jpg" >
<img src="http://eduppp.cn/images/0/2.jpg" >
<ul id="dis">
<li>中国标志性建筑：天安门</li>
<li>中国标志性建筑：东方明珠</li>
<li>中国标志性建筑：布达拉宫</li>
<li>中国标志性建筑：长城</li>
<li>中国标志性建筑：天坛</li>
</ul>
</div>
</div>
</body>
</html>

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

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

个人练习：使用HTML+CSS3制作图片轮播功能（不使用JavaScript）
先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...
推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
纯CSS 多图片轮播
今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...
纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
H5+CSS3做图片轮播滚动效果
HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...
css3 网页图片轮播的实现
.lunbo{ height: 640px; width: 100%; background-position: -280px; margin-top: 103px; -webkit-animatio ...
HTML图片轮播
一.纯 CSS 实现图片轮播引自原文作者:南张人原文链接:https://blog.csdn.net/u011848617/article/details/80468463 理论基础 CSS3 a ...
原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用 ...
纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

随机推荐

HTC与英特尔联手打造无线VR解决方案
除了TPCAST无线附件组件之外,HTC早前还宣布了与英特尔合作研发WiGig无线VR解决方案,他们还愿意寻找更多的合作伙伴以带来进一步的解决方案. HTC希望确保其Vive头显可以实现无线升级,让用 ...
sqlserver 操作xml
1.xml.exist 输入为XQuery表达式,返回0,1或是Null.0表示不存在,1表示存在,Null表示输入为空 2.xml.value 输入为XQuery表达式,返回一个SQL ...
background-size （设置背景图片的大小）
设置背景图片的大小,以长度值或百分比显示(数值包括长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
介绍shell脚本
简单的说shell就是一个包含若干行Shell或者Linux命令的文件.对于一次编写,多次使用的大量命令,就可以使用单独的文件保存下来, 以便日后使用.通常shell脚本以.sh为后缀.在编写shel ...
Java线程池使用
1.构造函数 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, TimeUnit ...
第九章观察者模式 OBSERVER
当对象发生改变时,应该使客户得到通知,然后,让客户查询对象的新状态. 其目的是在对象之间(目标对象和客户对象),定义了一个一对多的依赖关系,从而一个对象状态发生改变时,所有依赖这个对象的对象都能得到通 ...
js行内式遇到的一些问题 DOM对象和jq对象转换的问题
这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个 ...
iOS蓝牙开发
蓝牙常见名称和缩写 MFI ======= make for ipad ,iphone, itouch 专们为苹果设备制作的设备 BLE ==== buletouch low energy,蓝牙4.0 ...
第一百一十节，JavaScript匿名函数和闭包
JavaScript匿名函数和闭包学习要点: 1.匿名函数 2.闭包匿名函数就是没有名字的函数,闭包是可访问一个函数作用域里变量的函数.声明:本节内容需要有面向对象和少量设计模式基础,否则无法听懂 ...
iOS毛玻璃擦除效果
思路:首先我的思路放两个imageView在Controller里把高清的图片放在下面,带有毛玻璃效果的图片放在上面. //在Controller的view上加一个手势代码如下(温馨提示,开启imae ...

使用纯css3实现图片轮播

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

随机推荐

热门专题