问题请教大神:
1、在学做图片播放时,在css中的“.img_carousel .img_box ul”加入绝对定位后,“btn_toggle span”的显示不见了,删掉“position:absolute;”后“span”就显示出来了。为什么?
2、一定要写“margin:0;padding:0;”,否则图片左边会出现几十px的边框。
以上两个问题如图荧光部分。
3、调整位置position:absolute;top:245px;margin-left:280px;。span出现了,但点击激活了的图片后,图片切换了。但,span有不见了。
请大神指教,万分感谢。
html代码:
<div id="carousel">
<div class="img_carousel">
<div class="img_box">
<ul>
<li><img src="images/ban01.png" /></li>
<li><img src="images/ban02.png" /></li>
<li><img src="images/ban03.png" /></li>
<li><img src="images/ban01.png" /></li>
<li><img src="images/ban02.png" /></li>
<li><img src="images/ban03.png" /></li>
<ul>
<div class="btn_toggle">
<span class="act">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
var num = 0;
var timer = null;
$('.btn_toggle span').click(function(){
var index = $(this).index();
$(this).addClass('act').siblings().removeClass('act');<!--点击按钮激活-->
$('.img_box ul').animate({'left':-index*720});<!--图片切换-->
});
})
</script>
</div>
</div>
</div>
css代码:
*{margin:0 auto;}
body{font-family:"方正兰亭黑简体";font-size:14px;}
.area{width:680px;}
ul{list-style:none;}
#tools{width:720px;height:50px;}
#state{width:720px;height:98px;}
.menu{float:left;width:260px;height:42px;margin-top:52px;}
.logo{float:left;width:253px;height:42px;margin-top:34px;}
.search,.user{float:left;width:63px;height:42px;margin-top:52px;}
.bag{float:left;width:41px;height:42px;margin-top:52px;}
#carousel{margin-top:5px;}
.img_carousel{width:720px;height:265px;position:relative;overflow:hidden;}
.img_carousel .img_box{width:720px;height:265px;}
.img_carousel .img_box ul{width:9999px;position:absolute;margin:0;padding:0;}
.img_carousel .img_box ul li{float:left;display:block;}
.img_carousel .btn_toggle{position:absolute;bottom:6px;right:300px;}
.img_carousel .btn_toggle span{float:left;width:10px;height:10px;display:block;border:solid 1px #fff;border-radius:50%;margin-left:10px;}
.img_carousel .btn_toggle .act{background:#fff;}