初学html和css，照葫芦画瓢实现无js的轮播，主要借鉴了以下两个博客：
http://www.jianshu.com/p/28643f36011e
http://www.cnblogs.com/HLX1992/p/5910265.html
主要就是利用了overflow的hidden和animation属性，宽度只要改slider的width就行了。animation时间的计算还有延时可以参考http://www.jianshu.com/p/28643f36011e，作者讲的很详细，不过他和我实现的方法和效果都不一样。以下是代码：
<html>
<head>
<title>slide</title>
</head>
<body>
<div class="slider-focus">
<div class="slider">
<ul class="slider-list">
<li class="slider-item slider-item1"></li>
<li class="slider-item slider-item2"></li>
<li class="slider-item slider-item3"></li>
</ul>
<ul class="focus-list">
<li class="focus-item focus-item1"></li>
<li class="focus-item focus-item2"></li>
<li class="focus-item focus-item3"></li>
</ul>
</div>
</div>
</body>
</html>
样式
* {
margin:0;
padding:0;
}
.slider {
position:relative;
margin:0 auto;
width:100%;
height:360px;
text-align:center;
overflow:hidden;
}
.slider-list {
position:relative;
padding:0;
width:100%;
animation: sliderFade 11s linear 0s infinite normal;
-webkit-animation:sliderFade 11s linear 0s infinite normal;
}
/*鼠标放在上面动画会暂停*/
.slider:hover .slider-list {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.slider:hover .focus-item {
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
@keyframes sliderFade {
0% {
right:0;
}
27% {
right:0;
}
36% {
right:100%;
}
63% {
right:100%;
}
73% {
right:200%;
}
100% {
right:200%;
}
}
.slider-item {
position:absolute;
list-style:none;
width:100%;
height:360px;
}
.slider-item1 {
background-color:red;
}
.slider-item2 {
background-color:green;
left:100%;
}
.slider-item3 {
background-color:yellow;
left:200%;
}
.focus-item {
float:right;
list-style:none;
width:10px;
height:10px;
z-index:4;
border-radius:50%;
background-color:white;
margin-right:10px;
animation: focusFade 11s linear 0 infinite normal;
-webkit-animation:focusFade 11s linear;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
.focus-item + .focus-item {
/*opacity:0.5;*/
}
/*焦点定位*/
.focus-list {
position:absolute;
width:60px;
bottom:10px;
left:50%;
}
/*焦点延时*/
.focus-item2 {
animation-delay:4s;
-webkit-animation-delay:4s;
}
.focus-item3 {
animation-delay:8s;
-webkit-animation-delay:8s;
}
/*焦点循环*/
@keyframes focusFade {
0% {
background-color:black;
}
27% {
background-color:black;
}
36% {
background-color:white;
}
100% {
background-color:white;
}
}
网友评论