轮播图.gif
不会置入demo（T-T） 只能用ps模拟网页效果做一张GIF，渣图。网页动效要更平滑一些。
<html结构>
<body>
<div id="slidershow">
<input type="radio" checked name="slider" id="l01">
<input type="radio" name="slider" id="l02">
<input type="radio" name="slider" id="l03">
<div class="wrap">
<!--插入轮播图片-->
<div class="wrap">
<ul class="slider">
<li> </li>
<li> </li>
<li></li>
</ul>
</div>
<!--通过使用 "for" 属性将 label 绑定到 "input" -->
<div class="opts">
<label for="l01" class="focus-item focus-item1">1</label>
<label for="l02" class="focus-item focus-item2">2</label>
<label for="l03" class="focus-item focus-item3">3</label>
</div>
</div>
</body>
<CSS样式>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#slidershow {
position: relative;
width: 500px;
height: 500px;
margin: 30px auto;
overflow: hidden;
}
.slider {
width: 300%; /*--三张图片的宽度--*/
height: 100%;
margin-left: 0;
-webkit-animation: slide1 6s ease-out infinite;
}
.slider li {
float: left;
width: 500px;
height: 100%;
}
/*--创建三种动画策略--*/
@-webkit-keyframes slide1{
0% {margin-left: 0;}
23% {margin-left: 0;}
33% {margin-left: -500px;}
56% {margin-left: -500px;}
66% {margin-left: -1000px;}
90% {margin-left: -1000px;}
100% {margin-left: 0;}
}
@-webkit-keyframes slide2{
0% {margin-left: -500px;}
23% {margin-left: -500px;}
33% {margin-left: -1000px;}
56% {margin-left: -1000px;}
66% {margin-left: 0;}
90% {margin-left: 0;}
100% {margin-left: -500;}
}
@-webkit-keyframes slide3{
0% {margin-left: -1000px;}
23% {margin-left: -1000px;}
33% {margin-left: 0;}
56% {margin-left: 0;}
66% {margin-left: -500px;}
90% {margin-left: -500px;}
100% {margin-left: -1000;}
}
/*--修改动画名称--*/
/*--点击页码图标链接到input，实现点击页码更换图片的效果--*/
#l01:checked ~ .wrap .slider {
-webkit-animation-name: slide1;
}
#l02:checked ~ .wrap .slider {
-webkit-animation-name: slide2;
}
#l03:checked ~ .wrap .slider {
-webkit-animation-name: slide3;
}
/*--短暂地取消动画名称，模拟重启动画--*/
#l01:active ~ .wrap .slider {
-webkit-animation-name: none;
margin-left: 0;
}
#l02:active ~ .wrap .slider {
-webkit-animation-name: none;
margin-left: -500px;
}
#l03:active ~ .wrap .slider {
-webkit-animation-name: none;
margin-left: -1000px;
}
/*--页码样式--*/
.opts {
position: absolute;
bottom: 0;
width: 100%;
line-height: 0;
text-align: center;
padding: 5px 0;
}
.opts label {
display: inline-block;
width: 15px;
height: 10px;
margin: 0 3px;
border-radius: 5px;
cursor: pointer;
}
.focus-item{
width:100%;
height:100%;
background-color: #fff;
border-radius:inherit;
-webkit-animation: fade linear infinite;
}
/*--第二和第三个页码标签设置透明度0.2--*/
.focus-item2,.focus-item3 {
opacity: .2;
}
/*--页码动画总时长和图片轮播时长一致--*/
.focus-item{
-webkit-animation-duration: 6s;
}
/*--页码动画从0-5%渐显，所以等待时长缩短零点几秒--*/
.focus-item1{
-webkit-animation-delay: -.2s;
}
.focus-item2{
-webkit-animation-delay: 1.6s;
}
.focus-item3{
-webkit-animation-delay: 3.6s;
}
@-webkit-keyframes fade{
0%{
opacity:.2; /*--没轮到的页码设置成一点点透明--*/
z-index:2;
}
5%{
opacity:1;
z-index: 1;
}
20%{
opacity:1;
z-index:1;
}
25%{
opacity:.2;
z-index:0;
}
100%{
opacity:.2;
z-index:0;
}
}
/*--隐藏input按钮--*/
#l01,#l02,#l03 {
display: none;
}
本来要弄的是白色的圆点跳转成蓝色的效果，结果我弄来弄去也弄不出来，只好弄一个降低透明度来区分两种效果，也还行。
[参考来源] http://codepen.io/lucifier/pen/DicEn
