Question

我设法创建了一个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/

Answer 1

问题不在于加载，而是在视口左侧没有图像。您将所有图片向左浮动，而#next只是将它们向左滑动＆＃39;在＆＃39;后面。视口。但是你走了另一条路，实际上没有任何东西，所以你正在移动空白区域，然后用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;   
});

https://jsfiddle.net/cyberwombat/4jan3t10/14/

Jquery轮播闪烁图像问题

1 个答案: