分享一个好用的自适应响应式幻灯片焦点图代码,经过测试多端自适应,代码相对简洁。
官方网站:http://responsiveslides.com/
效果展示:https://www.dealsoar.com
分享一下,效果展示实例CSS代码:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides_wrap {
position: relative;
border-radius:5px;
overflow:hidden;
}
.rslides_wrap .prev,.rslides_wrap .next {
display:block;
position:absolute;
z-index:999;
top:50%;
margin-top:-30px;
left:3%;
width:40px;
height:60px;
background:url(slider-arrow.png) -126px -137px #000 no-repeat;
cursor:pointer;
filter:alpha(opacity=50);
opacity:0.5;
border:1px solid #000;
}
.rslides_wrap .next {
left:auto;
right:3%;
background-position:-6px -137px;
}