A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始


图片轮播图片链接挡住了其他页面内容,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");
}

评分

参与人数 1技术分 +1 收起 理由
张文 + 1

查看全部评分

5 个回复

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

那我的问题出现在哪?我需要隐藏溢出的,而且不能盖住其他内容
回复 使用道具 举报
  1. <div class="ad" >
  2.         <asp:Repeater ID="ddl" runat="server">
  3.         <HeaderTemplate> <ul class="slider" style="left: -37px; width: 668px; top: 1px; height: 100px;z-index:-1;"></HeaderTemplate>
  4.         <ItemTemplate>
  5.          <li><a href='NewsContent.aspx?newsid=<%#Eval("NewsId") %>'><img src='../upload/images/<%#Eval("PicUrl") %>' style="width:674px; height:103px;display:block;" alt="" /></li>  
  6.         </ItemTemplate>
  7.         <FooterTemplate> </ul></FooterTemplate>
  8.         </asp:Repeater>
  9.               <br />
  10.      <ul class="num" style="left: 259px; top: 57px">
  11.      <li>1</li>
  12.      <li>2</li>
  13.      <li>3</li>
  14.      <li>4</li>   
  15.       </ul>
  16.    </div>
  17. <div style="clear: both;"> </div>
复制代码
加个clear试下
回复 使用道具 举报
这是截图!不好意思,好久才弄上来

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

截图模板.png

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

轮播.png

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

评论.png
回复 使用道具 举报
郭会茹 发表于 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>
试了,还是不行!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马