今天是个悲伤的日子,由于我对css3标签理解的不深刻,所以直到现在只能写一篇留有遗憾的收获小博客(ps:已经抓掉了好几根头发)
轮播图效果我是用overflow这个“框”,加上css3的新属性animation配合@keyframes来制造轮播图效果。
步骤:用overflow来控制只显示一个图片大小,将所有图片float到一横排,通过margin左移或者右移来实现图片的转换。
animation来设置总时间,@keyframes来分配每个图片用时,每个图片切换的过程留一部分时间可以让图片有停留的。
本来做了一个列表,来实现鼠标悬停在列表项上的时候实现一个对应图片的选择效果,结果失败了 GG。很可能是~选择器用的有瑕疵。写的每一个小部件都是我的一部遗憾史。好疲惫,好想流眼泪。
效果图:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>turnpictures</title>
<link rel="stylesheet" href="turnpic.css">
</head>
<body>
<div class="wrapper">
<div class="pics">
<img src="pictures/pic1.jpg" >
<img src="pictures/pic2.jpg" >
<img src="pictures/pic3.jpg" >
<img src="pictures/pic4.jpg" >
<img src="pictures/pic5.jpg" >
</div>
<div class="lists">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
css:
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 10px;
}
.pics {
position: absolute;
width: 1500px;
animation: pic 30s ease-out infinite alternate;
}
.pics img {
width: 300px;
height: 200px;
float: left;
}
@keyframes pic {
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; }
}
.lists {
position: absolute;
left: 180px;
bottom: 5px;
width: 120px;
height: 20px;
display: inline-block;
}
.lists ul {
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
}
.lists ul li {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
color: #000;
background-color: #c0c;
opacity: .8;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
ul li:hover {
color: #fff;
background-color: #80c;
}