jquery的问题,初学菜鸟实在找不到错,求大神帮看下,在线等!!!

$(this).addClass("gray").siblings().removeClass("gray");我设置了增加类名之后,网页没有效果,用css改变标签颜色却... $(this).addClass("gray").siblings().removeClass("gray");我设置了增加类名之后,网页没有效果,用css改变标签颜色却可以,大神帮忙看下是哪里出了问题?

<!doctype html>
<html>
<head>
<style>
body{ margin:0;}
.banner_box{ background-color:#000;}
.banner{ width:960px; margin-left:auto; margin-right:auto; overflow:hidden; position:relative;}
.bannerkuang{ width:2880px;}
.bannerkuang img{ float:left;}
.clearfix{ clear:both;}
.ctrl{position:absolute; left:50%; bottom:15px; margin-left:-45px;}
.ctrl span{ float:left;width:20px; height:20px; margin-right:15px;background-color:#FFF; border-radius:10px;}
.gray{background-color:#00C;}
span{ width:20px; height:20px; background-color:red; float:left; margin:10px;}
</style>

<script src="gundongtu/jquery.js"></script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div class="banner_box">
<div class="banner">
<div class="bannerkuang">
<img src="gundongtu/images/banner01_03.png">
<img src="gundongtu/images/banner02.png">
<img src="gundongtu/images/banner03.png">
<div class="clearfix"></div>
</div>
<div class="ctrl">
<span></span>
<span></span>
<span></span>
<div class="clearfix"></div>
</div>
</div>
</div>

<script>
$(".ctrl span").mouseenter(
function(){
var n=$(this).index();
$(this).addClass("gray").siblings().removeClass("gray");
$(".bannerkuang").animate({marginLeft:-960*n});
}
)
</script>
</body>
</html>
展开
 我来答
朝阳072
2015-12-05 · TA获得超过216个赞
知道小有建树答主
回答量:152
采纳率:100%
帮助的人:142万
展开全部
对于你做的这个轮播滚动。
按照你这个写法应该是没有错的,但是却出不来效果,建议你进行单步验证,比如有没有触发mouseenter,有没有获取到该元素的位置值n,有没有获取到触发该事件的元素的兄弟姐妹元素等等。
另外一个方面,现在轮播的插件很多,没必要自己弄。网上找一个合适的,然后自己嵌入好自己的网站就好了。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友a09c1ef
2015-12-05 · TA获得超过876个赞
知道小有建树答主
回答量:330
采纳率:0%
帮助的人:149万
展开全部

您好,

    去掉这个试试(.ctrl span 里面的background-color:#FFF;)

<!doctype html>
<html>
<head>
<style>
body{ margin:0;}
.banner_box{ background-color:#000;}
.banner{ width:960px; margin-left:auto; margin-right:auto; overflow:hidden; position:relative;}
.bannerkuang{ width:2880px;}
.bannerkuang img{ float:left;}
.clearfix{ clear:both;}
.ctrl{position:absolute; left:50%; bottom:15px; margin-left:-45px;}
.ctrl span{ float:left;width:20px; height:20px; margin-right:15px; border-radius:10px;}
.gray{background-color:#00C;}
span{ width:20px; height:20px; background-color:red; float:left; margin:10px;}
</style>

<script src="gundongtu/jquery.js"></script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div class="banner_box">
<div class="banner">
     <div class="bannerkuang">
        <img src="gundongtu/images/banner01_03.png">
        <img src="gundongtu/images/banner02.png">
        <img src="gundongtu/images/banner03.png">
        <div class="clearfix"></div>
        </div>
        <div class="ctrl">
        <span></span>
        <span></span>
        <span></span>
        <div class="clearfix"></div>
        </div>
    </div>
</div>

<script>
$(".ctrl span").mouseenter(
function(){
var n=$(this).index();
$(this).addClass("gray").siblings().removeClass("gray");
$(".bannerkuang").animate({marginLeft:-960*n});
}
)
</script>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
Baby_原來
推荐于2016-03-13 · TA获得超过3402个赞
知道大有可为答主
回答量:1535
采纳率:94%
帮助的人:484万
展开全部
.ctrl span{ 
    float:left;
    width:20px; 
    height:20px; 
    margin-right:15px;
    background-color:#FFF; 
    border-radius:10px;
}

你在上面已经设置了background-color属性,js再去改变后也不会覆盖,去掉css中的background-color:#FFF

更多追问追答
追问

标签首先必须要设置颜色啊,当鼠标经过的时候,然后再换一种颜色,就是想达到这么个效果。但是我测试之后,增加类名是可以覆盖原来的属性的啊,下面这个颜色就有红色变为了蓝色。

追答

  但是你设置的.ctrl span中的background-color确实没被覆盖,根据css覆盖规则没有被覆盖掉,建议再设置一个css的class来设置初始颜色,然后替换class  这样效果会好点,改成这样

 .ctrl span {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    border-radius: 10px;
}

.white {
    background-color: #FFF;
}
<div class="ctrl">
                <span class="white"></span>
                <span class="white"></span>
                <span class="white"></span>
                <div class="white clearfix" ></div>
            </div>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式