黑马程序员技术交流社区

标题: 【紧急，求马上解决，下周要交的】图片轮播图片链接挡... [打印本页]

作者: 郑鹏 时间: 2012-11-15 18:51
标题: 【紧急，求马上解决，下周要交的】图片轮播图片链接挡...

图片轮播图片链接挡住了其他页面内容，overflow:hidden不管用，这是怎么回事？我网上没找到！
代码：
<div class="ad" >
   <asp:Repeater ID="ddl" runat="server">
   <HeaderTemplate> <ul class="slider" style="left: -37px; width: 668px; top: 1px; height: 100px;z-index:-1;"></HeaderTemplate>
   <ItemTemplate>
      <li><a href='NewsContent.aspx?newsid=<%#Eval("NewsId") %>'><img src='../upload/images/<%#Eval("PicUrl") %>' style="width:674px; height:103px;display:block;" alt="" /></li>
   </ItemTemplate>
   <FooterTemplate> </ul></FooterTemplate>
   </asp:Repeater>
            <br />
<ul class="num" style="left: 259px; top: 57px">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
   </ul>
  </div>

样式：
/** 滚动广告**/
#page_head .ad {
margin-bottom:10px;
width:674px;
height:103px;
overflow:hidden;
position:relative;
}
#page_head .slider,#page_head .num{
position:absolute;
left: 0px;
top: 1px;
}
#page_head .slider li{
list-style:none;
display:inline;
}
#page_head .slider img{
width:674px;
height:103px;
display:block;
}
#page_head .num
{
width:109px;
height:20px;
position:relative;
top:80px;
left:255px;
}
#page_head .num li{
float:left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
#page_head .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}

jq代码：
/*首页广告效果*/
$(function(){
   var len  = $(".num > li").length;
  var index = 0;
  var adTimer;
  $(".num li").mouseover(function(){
  index  = $(".num li").index(this);
  showImg(index);
  }).eq(0).mouseover();
  //滑入停止动画，滑出开始动画.
  $('.ad').hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
   showImg(index)
index++;
if(index==len){index=0;}
   } , 1000);
  }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
      var adHeight = $("#page_head .ad").height();
  $(".slider").stop(true,false).animate({top : -adHeight*index},1000);
  $(".num li").removeClass("on")
.eq(index).addClass("on");
}

作者: 许庭洲 时间: 2012-11-15 21:22
1. 若隐藏某元素，但在页面上保留该元素的空间的话，使用 visibility： hidden ；
2. 若在隐藏某元素的同时让其它内容填充空白的话应该使用 display： none 。
3. 在CSS中，overflow:hidden的作用是隐藏溢出，添加overflow：hidden属性之后，网页中的内容超过设定宽度或高度，内容都会被隐藏起来的。

作者: 郑鹏 时间: 2012-11-16 19:02

许庭洲发表于 2012-11-15 21:22
1. 若隐藏某元素，但在页面上保留该元素的空间的话，使用 visibility： hidden ；
2. 若在隐藏某元素的同时 ...

那我的问题出现在哪？我需要隐藏溢出的，而且不能盖住其他内容

作者: 郭会茹 时间: 2012-11-22 16:36

<div class="ad" >
<asp:Repeater ID="ddl" runat="server">
<HeaderTemplate> <ul class="slider" style="left: -37px; width: 668px; top: 1px; height: 100px;z-index:-1;"></HeaderTemplate>
<ItemTemplate>
<li><a href='NewsContent.aspx?newsid=<%#Eval("NewsId") %>'><img src='../upload/images/<%#Eval("PicUrl") %>' style="width:674px; height:103px;display:block;" alt="" /></li>
</ItemTemplate>
<FooterTemplate> </ul></FooterTemplate>
</asp:Repeater>
<br />
<ul class="num" style="left: 259px; top: 57px">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div style="clear: both;"> </div>

复制代码

加个clear试下

作者: 郑鹏 时间: 2012-11-22 17:53
这是截图!不好意思，好久才弄上来

截图模板.png (13.16 KB, 下载次数: 51)

轮播.png (131.48 KB, 下载次数: 59)

评论.png (7.13 KB, 下载次数: 48)

作者: 郑鹏 时间: 2012-11-22 18:02

郭会茹发表于 2012-11-22 16:36
加个clear试下

<div class="ad ListTwo_Three" >
                        <asp:Repeater ID="ddl" runat="server">
                        <HeaderTemplate> <ul class="slider" style="left: -37px; width: 668px; top: 1px; height: 100px;z-index:-1;"></HeaderTemplate>
                        <ItemTemplate>
                           <li><a href='NewsContent.aspx?newsid=<%#Eval("NewsId") %>'><img src='../upload/images/<%#Eval("PicUrl") %>' style="width:674px; height:103px;display:block;" alt="" /></li>
                        </ItemTemplate>
                        <FooterTemplate> </ul></FooterTemplate>
                        </asp:Repeater>
            <br />
                     <ul class="num" style="left: 259px; top: 57px">
                              <li>1</li>
                              <li>2</li>
                              <li>3</li>
                              <li>4</li>
                        </ul>
            </div><%--广告动画代码结束--%>
            <div style="clear: both;"> </div>
试了，还是不行！

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2