（自学收获）纯css网页小部件--轮播图效果

        今天是个悲伤的日子，由于我对css3标签理解的不深刻，所以直到现在只能写一篇留有遗憾的收获小博客（ps：已经抓掉了好几根头发）

        轮播图效果我是用overflow这个“框”，加上css3的新属性animation配合@keyframes来制造轮播图效果。

        步骤：用overflow来控制只显示一个图片大小，将所有图片float到一横排，通过margin左移或者右移来实现图片的转换。

                    animation来设置总时间，@keyframes来分配每个图片用时，每个图片切换的过程留一部分时间可以让图片有停留的。

       本来做了一个列表，来实现鼠标悬停在列表项上的时候实现一个对应图片的选择效果，结果失败了 GG。很可能是~选择器用的有瑕疵。写的每一个小部件都是我的一部遗憾史。好疲惫，好想流眼泪。

效果图：

html：

	
	
	


	

		

			
			
			
			
			
		
		

			

				
1
				
2
				
3
				
4
				
5
			
		
	
	

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;
}