* { 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的宽度,在小屏幕上响应的样式就有点难看了。