Javascript Jquery转盘闪烁图像问题

我已经成功地创建了一个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>

$（文档）.ready（函数（）{
var interval=setInterval（函数（）{
$（'#carousel ul'）。动画（{marginLeft:-480}，1000，function（）{
$（this.find（'li:last'）。在（$（this.find（'li:first'））之后；
$（this.css（{marginLeft:0}）；
})
},5000);
$（“#下一步”）。单击（函数（）{
$（'#carousel ul'）。动画（{marginLeft:-480}，1000，function（）{
$（this.find（'li:last'）。在（$（this.find（'li:first'））之后；
$（this.css（{marginLeft:0}）；
});
返回false；
});
$（'#prev'）。单击（函数（）{
$（'#carousel ul'）。动画（{marginLeft:480}，1000，function（）{
$（this.find（$（li:first））.before（$（this.find（$（li:last））；
$（this.css（{marginLeft:0}）；
});
返回false；
});
});

这是我的样品

---

问题不在于加载，而在于视口左侧没有图像。你让所有的图像都向左浮动，然后再继续移动，接下来你只需将它们滑到视口的“后面”。但是你可以换一种方式，那里实际上什么都没有，所以你要移动空白，然后使用css将想要的图像放在那里

解决方案是移动视口，使其查看一行图像中的第二个图像。那么你总是在两面都有一些东西：

所以我们移动视口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;   
});

---

问题不在于加载，而在于视口左侧没有图像。你让所有的图像都向左浮动，然后再继续移动，接下来你只需将它们滑到视口的“后面”。但是你可以换一种方式，那里实际上什么都没有，所以你要移动空白，然后使用css将想要的图像放在那里

解决方案是移动视口，使其查看一行图像中的第二个图像。那么你总是在两面都有一些东西：

所以我们移动视口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;   
});

---

如果这个演示对您有帮助，请检查它——它确实有帮助，但每个div都分配给每个图像。我的是一个列表。如果这个演示对你有帮助的话，请检查它。它确实有帮助，但是每个div都被分配给每个图像。我的是一个列表。你好，我想知道我将如何链接到特定的图像？你所说的链接是什么意思？你好，我想知道我将如何链接到特定的图像？你所说的链接是什么意思？