我已经成功创建了一个jquery旋转木马。但是,当按下前一个按钮时,图像在加载前会闪烁。我明白,这是由于列表没有以前的图像加载之前,其访问。有没有办法总是预加载它?无限滚动的旋转木马是如何做到的?我希望有人能帮忙。
<script>
$(document).ready(function(){
var interval = setInterval(function(){
$('#carousel ul').animate({marginLeft:-480},1000,function(){
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:0});
})
},5000);
$('#next').click(function(){
$('#carousel ul').animate({marginLeft:-480},1000,function(){
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:0});
});
return false;
});
$('#prev').click(function(){
$('#carousel ul').animate({marginLeft:480},1000,function(){
$(this).find('li:first').before($(this).find('li:last'));
$(this).css({marginLeft:0});
});
return false;
});
});
</script>
这是我对示例的修改。
https://jsfiddle.net/amosangyongjian/4jan3t10/问题不在于加载,而在于viewport左侧没有图像。你有你所有的图像浮动左侧和#next只是滑动他们离开"后面"的视口。但是反过来的话,那里实际上什么都没有所以你要移动空白然后用css把想要的图像放在那里。
解决方案是改变你的视口,使其在一排图像中看到第二张图像。然后你总是有东西在两边:
所以我们把viewport移到480px;
#carousel ul{
width:1920px;
padding:0;
margin:0 0 0 -480px;
}
然后我们相应地调整代码:
$('#next').click(function(){
$('#carousel ul').animate({marginLeft:-960},1000,function(){
$(this).find('li:last').after($(this).find('li:first'));
$(this).css({marginLeft:-480});
});
return false;
});
$('#prev').click(function(){
$('#carousel ul').animate({marginLeft : 0}, 1000, function(){
$(this).find('li:first').before($(this).find('li:last'));
$(this).css({marginLeft : -480});
});
return false;
});
https://jsfiddle.net/cyberwombat/4jan3t10/14/