* {
margin:0;
padding:0;
}
ol li,ul li {
list-style:none;
float:left;
}
ol {
position:relative;
background:#aaaaaa;
overflow:hidden;
height:350px;
}
ol>li {
width:100%;
height:100%;
}
ol>li>ul {
width:100%;
height:100%;
}
/*切换上一张下一张图片的图标样式*/
ol>li:first-child {
position:absolute;
left:0;
right:0;
top:50%;
z-index:3;
height:30px;
line-height:30px;
margin-top:-15px;
}
ol>li:first-child>ul>li {
width:30px;
text-align:center;
opacity:0.3;
background:#fafafa;
border-radius:50%;
font-weight:bold;
display:none;
}
ol>li:first-child>ul>li:first-child {
margin-left:20px;
}
ol>li:first-child>ul>li:first-child::after {
content:'<';
font-size:14px;
}
ol>li:first-child>ul>li:last-child {
float:right;
margin-right:20px;
}
ol>li:first-child>ul>li:last-child::before {
content:'>';
font-size:14px;
}
/*图片上的圆点的样式*/
ol>li:last-child {
position:absolute;
left:0;
right:0;
bottom:20px;
height:10px;
z-index:3;
}
ol>li:last-child>ul {
width:125px;
margin:0 auto!important;
float:none;
}
ol>li:last-child>ul>li {
width:5px;
height:5px;
margin:10px;
background:#fafafa;
opacity:0.5;
border-radius:50%;
}
.hover {
background:green!important;
}
这个轮播是替换了<ol>标签下的第二个<li>标签背景图片实现的轮播,我使用的jquery的版本是3.2.1。在这个页面中我使用了一个拼图ui的响应式框架设置了ol的宽度,在小屏幕上响应的样式就有点难看了。