Jquery旋转木马闪烁图像问题

Jquery carousel blinking image issue

本文关键字：问题 图像 闪烁 旋转木马 Jquery      更新时间：2023-09-26

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

相关文章：