<div class="ad">
<div class="ad_bg"></div><%--标题背景--%>
<div class="ad_info"></div><%--标题--%>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="ad_list">
<a href="#" target="_blank"><img src="images/Ads/01.jpg" title="111" alt="111" /></a>
<a href="#" target="_blank"><img src="images/Ads/02.jpg" title="222" alt="222" /></a>
<a href="#" target="_blank"><img src="images/Ads/03.jpg" title="333" alt="333"/></a>
<a href="#" target="_blank"><img src="images/Ads/04.jpg" title="444" alt="444" /></a>
</div><%--图片--%>
</div>css部分,用的是外部样式
.ad{width:318px;
height:216px;
position:relative;
overflow:hidden;
border:1px solid #666;
}
.ad_list img{ border:0px;}
.ad_bg
{
position:absolute;
bottom:0;
background-color:#000;
height:30px;
filter:Alpha(Opacity=30);
opacity:0.3;
z-index:1000;
cursor:pointer;
width:316px;
}
.ad_info
{
position:absolute;
bottom:0;
left:5px;
height:22px;
color:#fff;
z-index:1001;
cursor:pointer;
}
.ad_text
{
position:absolute;
bottom:3px;
width:100px;
z-index:1002;
right:3px;
}
.ad ul
{
position:absolute;
bottom:3px;
right:5px;
margin:0;
padding:0;
list-style-type:none;
z-index:1002;
filter:Alpha(Opacity=80);
opacity:0.8;
border:1px solid #fff;
z-index:1002;
}
.ad ul li
{
padding:0px 5px; float:left; display:block; color:#fff; border:##e5eaff 1px solid;
background:#6f4f67; cursor:pointer;
}
.ad ul li.on
{
background:#900;
}
.ad_list a{ position:absolute;}jquery
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var t = n = 0, count;
$(document).ready(function () {
count = $("#ad_list a").length;
$("#ad_list a:not(:first-child)").hide();
$("#ad_info").html($("#ad_list a:first-child").find("img").attr('alt'));
$("#ad_info").click(function () { window.open($("#ad_list a:first-child").attr('href'), "_blank") });
$("#ad li").click(function () {
var i = $(this).text() - 1; //获取Li元素内的值,即1,2,3,4
n = i;
if (i >= count) return;
$("#ad_info").html($("#ad_list a").eq(i).find("img").attr('alt'));
$("#ad_info").unbind().click(function () { window.open($("#ad_list a").eq(i).attr('href'), "_blank") })
$("#ad_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("ad").style.background = "";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#ad").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });
}) function showAuto() {
n = n >= (count - 1) ? 0 : ++n;
$("#ad li").eq(n).trigger('click');
}
</script>
就是jquery这里出现问题,第五行就不能显示(第五行是显示图片的alt属性的内容)。css和html没有什么问题。请问是什么问题?
<div class="ad_bg"></div><%--标题背景--%>
<div class="ad_info"></div><%--标题--%>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="ad_list">
<a href="#" target="_blank"><img src="images/Ads/01.jpg" title="111" alt="111" /></a>
<a href="#" target="_blank"><img src="images/Ads/02.jpg" title="222" alt="222" /></a>
<a href="#" target="_blank"><img src="images/Ads/03.jpg" title="333" alt="333"/></a>
<a href="#" target="_blank"><img src="images/Ads/04.jpg" title="444" alt="444" /></a>
</div><%--图片--%>
</div>css部分,用的是外部样式
.ad{width:318px;
height:216px;
position:relative;
overflow:hidden;
border:1px solid #666;
}
.ad_list img{ border:0px;}
.ad_bg
{
position:absolute;
bottom:0;
background-color:#000;
height:30px;
filter:Alpha(Opacity=30);
opacity:0.3;
z-index:1000;
cursor:pointer;
width:316px;
}
.ad_info
{
position:absolute;
bottom:0;
left:5px;
height:22px;
color:#fff;
z-index:1001;
cursor:pointer;
}
.ad_text
{
position:absolute;
bottom:3px;
width:100px;
z-index:1002;
right:3px;
}
.ad ul
{
position:absolute;
bottom:3px;
right:5px;
margin:0;
padding:0;
list-style-type:none;
z-index:1002;
filter:Alpha(Opacity=80);
opacity:0.8;
border:1px solid #fff;
z-index:1002;
}
.ad ul li
{
padding:0px 5px; float:left; display:block; color:#fff; border:##e5eaff 1px solid;
background:#6f4f67; cursor:pointer;
}
.ad ul li.on
{
background:#900;
}
.ad_list a{ position:absolute;}jquery
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var t = n = 0, count;
$(document).ready(function () {
count = $("#ad_list a").length;
$("#ad_list a:not(:first-child)").hide();
$("#ad_info").html($("#ad_list a:first-child").find("img").attr('alt'));
$("#ad_info").click(function () { window.open($("#ad_list a:first-child").attr('href'), "_blank") });
$("#ad li").click(function () {
var i = $(this).text() - 1; //获取Li元素内的值,即1,2,3,4
n = i;
if (i >= count) return;
$("#ad_info").html($("#ad_list a").eq(i).find("img").attr('alt'));
$("#ad_info").unbind().click(function () { window.open($("#ad_list a").eq(i).attr('href'), "_blank") })
$("#ad_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
document.getElementById("ad").style.background = "";
$(this).toggleClass("on");
$(this).siblings().removeAttr("class");
});
t = setInterval("showAuto()", 4000);
$("#ad").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });
}) function showAuto() {
n = n >= (count - 1) ? 0 : ++n;
$("#ad li").eq(n).trigger('click');
}
</script>
就是jquery这里出现问题,第五行就不能显示(第五行是显示图片的alt属性的内容)。css和html没有什么问题。请问是什么问题?
.ad_list img{ border:0px;}
.ad_bg{position:absolute; bottom:0;background-color:#000; height:3px; filter:Alpha(Opacity=30); opacity:0.3;z-index:1000;cursor:pointer; width:316px;}
.ad_info{position:absolute;bottom:0;left:5px;height:22px;color:#fff;z-index:1001;cursor:pointer;}
.ad_text{position:absolute;bottom:3px;width:100px; z-index:1002;right:3px;}
.ad ul{position:absolute; bottom:3px;right:5px;margin:0;padding:0; list-style-type:none;z-index:1002;filter:Alpha(Opacity=80);opacity:0.8;border:1px solid #fff;z-index:1002;}
.ad ul li{padding:0px 5px; float:left; display:block; color:#fff; border:##e5eaff 1px solid;background:#6f4f67; cursor:pointer;}
.ad ul li.on{background:#900;}
.ad_list a{ position:absolute;}