php 图片无点击自动轮播,javascript,_轮播图无缝切换时，补在后面的图片会有短暂的空白。。，javascript - phpStudy...

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

Demo

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

• 1
• 2
• 3

$('.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);)没有感到闪动的情况发生？？？

相关阅读:

Linux 下php使用 Pusher 遇到一个难题

DOM事件绑定回调函数执行过程是什么？

gitlab webhook 设置

哪里有介绍angular-material的样式类？

brackets编辑器怎么设置换行符？

使用fatfree框架,debug=3,为什么log都打到了php_error.log里面?

图中红框内数据库关联符号是什么意思？

调试程序的时候暴露在console的参数信息不清除有什么危害？

使用PHP，当curl初始化时产生解析错误

react的super属性是指什么？

谷歌学术搜索结果中abstract不完整，完整信息搜索引擎不提供吗？

如何获得iframe里的document

z-index 和 translateZ(0)的疑问

pv量统计，a标签点击包括站内和站外的链接

web app可以设0.5px宽的边框吗

那些ORM的库要怎么解决+1-1这样时的安全问题

angularjs怎样把有PHP代码的共用部分提出来

批量查询域名的注册状态

iOS开发, 如何通过HTTP Post发送这个符号"&"到服务器?

php站点，点击提交按钮到返回结果都经历了哪些过程?