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

*{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;}

$('.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');

}

});

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

曾试过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);)没有感到闪动的情况发生？？？