KENTSING
KENTSING
采纳率100%
2016-10-08 06:00 阅读 1.3k
已采纳

新手请教:html+css图片切换出现问题,toggle会随第一张图片左移?求助!

点击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;}

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2016-10-08 06:41
      <ul>
                <li><img src="images/ban01.png" /></li>
                <li><img src="images/ban02.png" /></li>
            </ul><!---------这个是结束符,你又重启一个ul了,导致btn_toggle也放到一个新ul里面了------------>
    
    点赞 3 评论 复制链接分享

相关推荐