首页新闻找找看学习计划

div不显示,我也不知道为什么,求助!

0
悬赏园豆:15 [待解决问题]

http://codepen.io/wufengjie/pen/DfiKw

随便写的一个轮播插件

这是我的代码的地址。

图片左边的隐藏翻页按钮出不来。右边的能出来。

小弟从事前端不久,请教一下大家了~

删掉上一页的position就出来了,可是这个div就整行显示了~

我需要的是左右各一个。

html 片段

<div class="img-slid" id="img-slid">
<div class="pre"><</div>
<ul style="">
  <li>
    <img src="http://image.zcool.com.cn/img3/11/42/m_1344239437912.jpg" alt="" />
  </li>
  <li>
    <img src="http://image.zcool.com.cn/img3/36/15/m_1344239438115.jpg" alt="" />
  </li>
  <li>
    <img src="http://image.zcool.com.cn/img3/24/8/1344239434435.jpg" alt="" />
  </li>
</ul> 
<div class="next">></div>
</div>

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;
}
JackyWu_u51的主页 JackyWu_u51 | 初学一级 | 园豆:142
提问于:2014-04-01 14:35
< >
分享
所有回答(3)
0

hexllo | 园豆:405 (菜鸟二级) | 2014-04-01 14:54

您是说使用“<>”需要转义吗?

支持(0) 反对(0) JackyWu_u51 | 园豆:142 (初学一级) | 2014-04-01 14:56

@←逗比一个: 不好意思,看错了,你的代码我仔细看了一遍,没发现问题啊..

你要不换个浏览器看看?或是看<是不是跑最左边去了?

支持(0) 反对(0) hexllo | 园豆:405 (菜鸟二级) | 2014-04-01 15:08

@hexllo: 我发现问题了,   是被ul 覆盖了  加一个左右翻页加一个z-index 就好了。

还是很谢谢你啊。

支持(0) 反对(0) JackyWu_u51 | 园豆:142 (初学一级) | 2014-04-01 15:20

@←逗比一个:强,我怎么没想到..同样的写法,你右边那个没有盖着.怎么也想不到..

支持(0) 反对(0) hexllo | 园豆:405 (菜鸟二级) | 2014-04-01 17:15

@hexllo: 默认的是按书写顺序排列的。  右边的写在ul后面,所以,是右边的盖住ul。一起学习吧。

支持(0) 反对(0) JackyWu_u51 | 园豆:142 (初学一级) | 2014-04-01 18:54

@←逗比一个: 嗯,好.记得了,默认按书写顺序排列.

支持(0) 反对(0) hexllo | 园豆:405 (菜鸟二级) | 2014-04-02 13:43
0

左边的按钮没有显示是因为被ul覆盖了,设置z-index 大于 ul的z-index就好了。

JackyWu_u51 | 园豆:142 (初学一级) | 2014-04-03 22:32
0

> &gt;<%lt; 没好你找我。

匠人 | 园豆:280 (菜鸟二级) | 2015-12-15 13:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册