一度に3枚の画像を表示

Question

10-12枚の画像を含むボックスから一度に3枚の画像を表示したいとします。一度に1つの画像を表示するこのスクリプトはすでにありますが、一度に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：

.image { 
    display: none; 
    position: relative; 
    top: 0; 
    left: 0; 
} 

私は、これはあなたがすることができ