新手请教：html+css图片切换出现问题，toggle会随第一张图片左移？求助！

Question

点击toggle span后，为什么toggle span会跟随着左移，循环回第一张时，toggle span又出现了？请大神指教。
ntml代码：

 <div class="img_carousel">
    <div class="img_box">
        <ul>
            <li><img src="images/ban01.png" /></li>
            <li><img src="images/ban02.png" /></li>
        <ul>
    <div class="btn_toggle">
        <span class="act"></span>
        <span></span>
    </div>  
<script src="js/jquery-1.7.2.min.js"></script>
<script>
    $(function(){
        var num = 0;
        $('.btn_toggle span').click(function(){
              var index = $(this).index(); 
              $(this).addClass('act').siblings().removeClass('act');
              $('.img_box ul').animate({'left':-index*1080});   
            });
    });
</script>
css代码：
.img_carousel{width:720px;height:265px;position:relative;overflow:hidden;}
    .img_box{width:720px;height:265px;position:absolute;}
    .img_box ul{width:9999px;position:absolute;margin:0;padding:0;}
    .img_box ul li{float:left;display:block;}
    .btn_toggle{position:absolute;top:250px;margin-left:280px;}
    .btn_toggle span{float:left;width:10px;height:10px;display:block;border:solid 1px #fff;border-radius:50%;margin-left:10px;}
    .btn_toggle .act{background:red;}

Answer 1

  <ul>
            <li><img src="images/ban01.png" /></li>
            <li><img src="images/ban02.png" /></li>
        </ul><!---------这个是结束符，你又重启一个ul了，导致btn_toggle也放到一个新ul里面了------------>