鍍金池/ 問答/HTML/ 為什么jq,css()方法修改left不生效？

為什么jq,css()方法修改left不生效？

1我在做輪播練習的時候遇到的小問題，我的思路是copy一個元素放到最后面，然后輪播到最后一個元素，再把整體元素拉回到原來的位置，當我設置css的時候發(fā)現(xiàn)怎么也修改不了left 的數(shù)值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,
            html,
            ul,
            li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            img {
                display: block;
                width: 500px;
                height: 200px;
            }
            
            .clearfix:after {
                content: '';
                display: block;
                clear: both;
            }
            
            #wrap .round li {
                float: left;
            }
            
            #wrap {
                position: relative;
            }
            
            #wrap .left,
            .right {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                border: 1px solid #fff;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                position: absolute;
                top: 50%;
                margin-top: -15px;
                color: #fff;
            }
            
            #wrap .left:hover,
            .right:hover {
                background-color: #ccc;
            }
            
            .left {
                left: 10px;
            }
            
            .right {
                right: 10px;
            }
            
            #wrap .round {
                position: absolute;
                left: 0;
            }
            
            #wrap .list {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            #wrap .list>li {
                width: 40px;
                height: 10px;
                border: 1px solid #ccc;
                border-radius: 7px;
                margin-left: 10px;
                float: left;
                cursor: pointer;
            }
            
            .color {
                background-color: #fff;
            }
            
            .kl {
                left: 0;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="wrap">
            <ul class="round">
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg" />
                </li>
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg" />
                </li>
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg" />
                </li>
                <li>
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/26.jpg" />
                </li>
            </ul>
            <div class="left">
                <</div>
                    <div class="right">></div>
                    <ul class="list">
                        <li class="color"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
            </div>
            <script type="text/javascript">
                var $wrap = $('#wrap');
                var clonfirstli = $('.round li').first().clone();
                $('.round').append(clonfirstli);
                var $li = $('.round li');
                var oul = $('.round');
                var hei = $li.first().height();
                var firtli = $li.first().width();
                var $list = $('.list > li');
                var ll = firtli + '';
                var len = ($li.first().width()) * ($li.length);
                var num = 0;
                var k = 0;
                var $btncheck = $('#wrap').find('div');
                $wrap.css({
                    'width': firtli,
                    'height': hei
                })
                $('.round').css({
                    'width': len
                })
                $btncheck.on('click', function(e) {
                    k++;
                    num++;
                    $list.removeClass('color');
                    $list.eq(k).addClass('color');
                    oul.animate({
                        'left': '-=' + ll
                    })

                    if(k === ($list.length)) {
                        k = 0;
                        $list.removeClass('color');
                        $list.eq(k).addClass('color');
                    }
                    if(num === 4) {
                         console.log(1);
                        oul.css('left','0px')  //這句話不生效？求原因
                    }
                })
            </script>
    </body>

</html>
回答
編輯回答
拼未來
-- 以下兩種方式
a.直接設置.animate
    if(num === 4) {
       console.log(1);
       //oul.css('left','0px');  //這句話不生效？求原因
       oul.animate({ 'left': '0'});
    }

b.由于.css 和 .animate有沖突，可以先.stop()，再去設置.css
    if(num === 4) {
       console.log(1);
       //oul.css('left','0px');  //這句話不生效？求原因
       //oul.animate({ 'left': '0'});
       oul.stop().css("left",'0');
    }
2017年9月2日 04:05
編輯回答
柒槿年
if (num > 4) {
  console.log(1);
  num = 0
  oul.css('left', '0')  //這句話不生效？求原因
  return
}
oul.animate({
  'left': '-=' + ll
})
2017年11月10日 11:12