jQuery代码的问题。帮我看看下面代码哪里出错了
<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.header .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;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js">
</script>
<script>
$(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;}
},3000)
}
).trigger("mouseleave");
})
function showImg(index){
var adHeight=$(".header .ad").height();
$(".slide").stop(true,false).animate({top:-adHeight*index},1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
</script>
</head>
<body>
<div class="header">
<div class="ad">
<ul class="slide">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
预期效果都是在同一排的，但是现在都变成块元素，每个元素都占一行 展开
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.header .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;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js">
</script>
<script>
$(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;}
},3000)
}
).trigger("mouseleave");
})
function showImg(index){
var adHeight=$(".header .ad").height();
$(".slide").stop(true,false).animate({top:-adHeight*index},1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}
</script>
</head>
<body>
<div class="header">
<div class="ad">
<ul class="slide">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
预期效果都是在同一排的，但是现在都变成块元素，每个元素都占一行 展开
4个回答
展开全部
li默认是块元素呀，你没有设置display:inline-block; 也没有设置float:left;呀...
所以，它会以块元素来显示，不会占在一行的...
所以，它会以块元素来显示，不会占在一行的...
追问
我主要问的是jQuery的问题，不是CSS的
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
无论从jquery,还是从css，都看不出你的代码设置了同一排显示；好好整理你的代码；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你css里没设置显示同一行，jquery里也没给歌css样式，它怎么会显示同一行呢，再说显示同一行本来就是css的事，你非得要用jquery来完成，就算是用jquery你也得给写行代码，css里也不写，jquery里也不写请问他为什么要显示在一行里？你以为jquery像你一样的聪明啊，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你问的jquery 的问题 那你就用jqyery 给li 设置个css样式啊， 你又 不在css 里写 li 的样式 又不设置肯定是每个元素都占一行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
