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

문제는 너무 많은 일로드하지만 하나의 뷰포트의 왼쪽에는 이미지가 없음을하지 않습니다. 모든 이미지가 떠 다니고 #next는 단순히 뷰포트 뒤의 왼쪽으로 슬라이드됩니다. 하지만 실제로는 아무 것도 없기 때문에 빈 공간을 이동하고 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/