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> 展开
<!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> 展开
3个回答
展开全部
对于你做的这个轮播滚动。
按照你这个写法应该是没有错的,但是却出不来效果,建议你进行单步验证,比如有没有触发mouseenter,有没有获取到该元素的位置值n,有没有获取到触发该事件的元素的兄弟姐妹元素等等。
另外一个方面,现在轮播的插件很多,没必要自己弄。网上找一个合适的,然后自己嵌入好自己的网站就好了。
按照你这个写法应该是没有错的,但是却出不来效果,建议你进行单步验证,比如有没有触发mouseenter,有没有获取到该元素的位置值n,有没有获取到触发该事件的元素的兄弟姐妹元素等等。
另外一个方面,现在轮播的插件很多,没必要自己弄。网上找一个合适的,然后自己嵌入好自己的网站就好了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
您好,
去掉这个试试(.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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
.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>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询