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

来源：互联网发布：算法导论是c语言编辑：程序博客网时间：2024/06/05 06:30

今天是个悲伤的日子，由于我对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;}

0 0