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