한 번에 3 개의 이미지 표시

Question

10-12 개의 이미지가 포함 된 상자에서 한 번에 3 개의 이미지를 표시하고 싶습니다. 한 번에 하나의 이미지를 표시하는이 스크립트가 이미 있지만 한 번에 3 개 (또는 다른 양)를 무한대로 회전 시키려면 어떻게 바꿀 수 있습니까?

JS ... 나는 slice() 대신 eq()를 사용하는 것을 시도하고있다 그러나 나는 3으로 전진 할 수 없습니다 :

function displayImg() { 
    // Each item 
    var item = $('.image'); 

    //initial fade-in time 
    var initialFadeIn = 1000; 

    //interval between items 
    var itemInterval = 3000; 

    //cross-fade time 
    var fadeTime = 1000; 

    //count number of items 
    var numberOfItems = item.length; 

    //set current item 
    var currentItem = 0; 

    //show first item 
    item.eq(currentItem).fadeIn(initialFadeIn); 

    //loop through the items 
    var infiniteLoop = setInterval(function() { 
    item.eq(currentItem).fadeOut(fadeTime); 

    if (currentItem == numberOfItems - 1) { 
     currentItem = 0; 
    } else { 
     currentItem++; 
    } 
    item.eq(currentItem).fadeIn(fadeTime); 

    }, itemInterval); 
} 

displayImg(); 

마크 업 :

<div id="parent"> 
    <div class="image">one</div> 
    <div class="image">two</div> 
    <div class="image">three</div> 
    <div class="image">four</div> 
    <div class="image">five</div> 
    <div class="image">six</div> 
    <div class="image">Seven</div> 
    <div class="image">Eight</div> 
    <div class="image">Nine</div> 
    <div class="image">Ten</div> 
</div> 

JsFiddle here.

Answer 1

스플 라이스 기능을 사용하여이를 수행 할 수 있습니다. 당신의 HTML

JS에

변경 사항 없음 (내가 표시/숨기기로 일을하지 않은) :

function displayImg() { 
    // Each item 
    var item = $('.image'); 

    //initial fade-in time (in milliseconds) 
    var initialFadeIn = 1000; 

    //interval between items (in milliseconds) 
    var itemInterval = 3000; 

    //cross-fade time (in milliseconds) 
    var fadeTime = 1000; 

    //count number of items 
    var numberOfItems = item.length; 

    //set current item 
    var currentItem = 0; 
    var noOfItems=3; 
    var totalItems=10; 

    item.slice(currentItem, noOfItems).show() 

    var infiniteLoop = setInterval(function() { 
    item.slice(currentItem, noOfItems).hide() 
    if(currentItem<=totalItems) 
    { 
     currentItem=noOfItems; 
     noOfItems+=3; 
    } 
    else 
    { 
     currentItem=0; 
     noOfItems=3 
    } 
    item.slice(currentItem, noOfItems).show(); 
    }, itemInterval); 
} 

displayImg(); 

CSS :이 당신이 할 수있는