轮播图无缝切换时，补在后面的图片会有短暂的空白。。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style type="text/css">
    *{margin:0;padding:0;box-sizing:border-box;}
    .wrap{
        overflow:hidden;
        position:relative;
    }
    ul{
        width:3600px;
        margin-left:calc((100% - 1200px)/2  - 1200px);
    }
    li{
        list-style:outside none none;
        float:left;
        width:1200px;
        height:300px;
    }
    .prev,.next{
        width:calc((100% - 1200px) / 2);
        height:300px;
        line-height:300px;
        text-align:center;
        position:absolute;
        top:0;
        background:rgba(0,0,0,.1);
    }
    .prev{left:0;}
    .next{right:0;}
    .clearfix:after{
        content:'';
        clear:both;
        overflow:hidden;
        height:0;
        display:block;
    }
    .red{background:red;}
    .black{background:black;}
    .orange{background:orange;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="main">
        <a href="#" class='prev'>prev</a>
        <a href="#" class='next'>next</a>
            <ul class="clearfix">
                <li class='red'>1</li>
                <li class="current black">2</li>
                <li class='orange'>3</li>
            </ul>
        </div>
    </div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
    $('.prev, .next').click(function(event){
        var target = $(event.target);
        if(target.attr('class') == 'prev'){
        }else{
            var node = $('.current').prev('li');
            $('ul').animate({
                'margin-left' : '+=' + -1200
            }, 1000, function(){
                $('ul').append(node).css('margin-left', '+=' + 1200);
            });
            $('.current').next('li').addClass('current').siblings('li').removeClass('current');
        }
    });
</script>
</body>
</html>

往下翻时第一张会出现短暂的空白再补到后面去. 我知道问题是哪,但不知道怎么解决??

曾试过animate移动600，再把node插入到后面去和再直接写css('margin-left')用transition来实现动画。结果也不行....

var node = $('.current').prev('li');
$('ul').animate({
    'margin-left': '+=' + -600
},1000,function(){
    $('ul').css('margin-left': '+=' + -600);
    $('ul').append(node).css('margin-left', '+=' + 1200);
});

//css
ul{transition:-margin-left 1s linear 1s;}

还想请问下，这当中触发了多少次重绘？为什么执行这句（css('margin-left', '+=' + 1200);）没有感到闪动的情况发生？？？

这个空白是加载延迟导致的吧

【热门文章】