http://codepen.io/wufengjie/pen/DfiKw
随便写的一个轮播插件
这是我的代码的地址。
图片左边的隐藏翻页按钮出不来。右边的能出来。
小弟从事前端不久,请教一下大家了~
删掉上一页的position就出来了,可是这个div就整行显示了~
我需要的是左右各一个。
html 片段
css
img{
border:0px;
}
.img-slid ul li{
background: none repeat scroll 0 0 #000000;
float: left;
height: 200px;
overflow: hidden;
position: relative;
width: 400px;
}
.img-slid ul,li{
list-style: none outside none;
margin: 0;
padding: 0;
}
.img-slid{
width:400px;
overflow: hidden;
position: relative;
height: 200px;
}
.img-slid ul{
position: absolute;
height: 200px;
}
.img-slid .pre,.next{
color: #fff;
font-size:24px;
text-align: center;
height:200px;
position:absolute;
background: #000;
opacity: 0;
width:50px;
line-height:200px;
cursor: pointer;
}
.img-slid .pre:hover{
opacity: 0.2;
}
.img-slid .next:hover{
opacity: 0.2;
}
.img-slid .pre{
left:0;
}
.img-slid .next{
left:350px;
}