jqueryカルーセルの点滅イメージの問題

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> 

これはサンプルのjfiddleです。

https://jsfiddle.net/amosangyongjian/4jan3t10/

Answer 1

問題は、そんなに1のローディングのが、1つのビューポートの左側に画像がないということではありません。あなたはあなたのすべての画像を左に浮かべて#next上に置くだけで、ビューポートの後ろにそれらをスライドさせます。しかし、あなたはそこに実際に何もないので、あなたは空白のスペースをシフトしてから、そこに目的のイメージを置くためにCSSを使っています。

解決策は、画像の行の2番目の画像を見るようにビューポートを移動することです。次に、常に両側に何かがあります：

ビューポート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/