分类
Wordpress 原创教程

分享一个好用的自适应响应式幻灯片焦点图代码

分享一个好用的自适应响应式幻灯片焦点图代码,经过测试多端自适应,代码相对简洁。

官方网站: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;
}

 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注


RECOMMENDED