同時顯示3張圖像

我想從包含10-12張圖像的方框中一次顯示3張圖像。我已經有了這個腳本，它一次顯示一個圖像，但是如何將它改變爲無限次地旋轉3個（或另一個量）？我一直在嘗試使用slice()，而不是eq()，但我不能讓它往前走了3 ...同時顯示3張圖像

JS：

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。

來源

2016-11-28 Meek

你可以在容器和目標容器中包裝所需數量的圖像（甚至是dinamically），所以var item = $（'。container'）; ...這將是最簡單的解決方案，我想，沒有太多的變化... – sinisake

您可以使用拼接功能來做到這一點。

沒有改變你的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; 
}

我希望這有助於

來源

2016-11-28 11:09:38

是的，這就是我想要實現的。很酷。謝謝。 – Meek

同時顯示3張圖像

回答

相關問題