hello,大家好,给大家带来一个小的轮播图;
html代码:
![8897c2f376e08ab4d2fa8b0271a90667.png](https://img-blog.csdnimg.cn/img_convert/8897c2f376e08ab4d2fa8b0271a90667.png)
样式代码:
* { padding: 0; margin: 0; }li { list-style: none; }img { border: none; }body { background: #ecfaff; }.play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }.play .text {width:100%; position:absolute; left:0; bottom:0; height:60px;}.play .text div {position:absolute; left:0; top:0; width:100%; height:100%; background:black; filter:alpha(opacity:40); opacity:0.4; z-index:99;}.play .text span {position:absolute; left:0; top:0; width:100%; height:100%; line-height:60px; color:white; z-index:999; text-align:center; font-size:20px;}ol { position: absolute; right: 5px; bottom: 5px; z-index: 99999; }ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }.active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }ul { position: absolute; top: 0; left: 0; z-index: 1; }ul li { width: 470px; height: 150px; float: left; }ul img { float: left; width: 470px; height: 150px; }
js的代码: