移动端无缝轮播图
html代码:
<div class="focus">
<ul>
<li><img src="upload/focus.jpg" alt=""></li>
<li><img src="upload/focus2.jpg" alt=""></li>
<li><img src="upload/focus3.jpg" alt=""></li>
</ul>
<ol>
</ol>
</div>
css代码
.focus {
position: relative;
padding-top: 44px;
overflow: hidden;
}
.focus img {
width: 100%;
}
.focus ul {
overflow: hidden;
width: 500%;
margin-left: -100%;
}
.focus ul li {
float: left;
width: 20%;
}
.focus ol {
position: absolute;
bottom: 5px;
right: 5px;
margin: 0;
}
.focus ol li {
display: inline-block;
width: 5px;
height: 5px;
background-color: #fff;
margin-right: 5px;