創建一個旋轉木馬，顯示元素數量，隱藏並顯示下一個元素的數量

我想創建一個旋轉木馬，它首先顯示前7個圖像，並在內部它應顯示前7個圖像，然後淡出他們出來並顯示接下來的7張圖片。創建一個旋轉木馬，顯示元素數量，隱藏並顯示下一個元素的數量

當所有的圖像都顯示出來後，它應該重新開始並且有一個無限循環。

我該如何解決這個問題？

HTML：

<div class='flow'> 
    <img src='assets/library/en/references/1.png' /> 
    <img src='assets/library/en/references/2.png' /> 
    <img src='assets/library/en/references/3.png' /> 
    <img src='assets/library/en/references/4.png' /> 
    <img src='assets/library/en/references/5.png' /> 
    <img src='assets/library/en/references/6.png' /> 
    <img src='assets/library/en/references/7.png' /> 
    <img src='assets/library/en/references/8.png' /> 
    <img src='assets/library/en/references/9.png' /> 
    <img src='assets/library/en/references/10.png' /> 
    <img src='assets/library/en/references/11.png' /> 
    <img src='assets/library/en/references/12.png' /> 
    <img src='assets/library/en/references/13.png' /> 
    <img src='assets/library/en/references/14.png' /> 
    <img src='assets/library/en/references/15.png' /> 
    <img src='assets/library/en/references/16.png' /> 
    <img src='assets/library/en/references/17.png' /> 
    <img src='assets/library/en/references/18.png' /> 
    <img src='assets/library/en/references/19.png' /> 
    <img src='assets/library/en/references/20.png' /> 
    <img src='assets/library/en/references/21.png' /> 
</div>

的Jquery：

x = 21; 

setInterval(function() { 

if(x>=21){ 

    x = 21;  
} 

x = x - 7; 
y = x + 7; 

    setTimeout(function() { 
     $('.flow > img:nth-child(1n+'+y+')').fadeOut().animate({ 
      opacity: 0 
     }, 500); 
    }, 3000); 

    setTimeout(function() { 
     $('.flow > img:nth-child(1n+'+x+')').fadeIn().animate({ 
      opacity: 1 
     }, 500); 
    }, 3000); 

}, 3000);

來源

2013-10-29 Kim

我覺得有很多的方法就這個問題和有圖像旋轉木馬很多jQuery插件（unheap.com就是一個很好的資源庫jQuery插件，你可以在這裏探索）。我還在使用jQuery，而且前段時間我也遇到同樣的問題。

我對使用.each（）函數而不是使用第n個子選擇器進行操作感到舒服。

var len = $('.flow > img').length; 
var by = 7; 
var start = -1; //since first index is 0, I'll start lower than that 
var curr = start; 

setInterval(function(){ 
    if(curr >= len - 1){ 
     curr = start; 
    } 

    $('.flow > img').each(function(index, element) { 
     if(index > curr && index <= curr + by){ 
      $(this).fadeIn(500); 
     }else{ 
      $(this).hide(); 
     } 
    }); 

    curr += by; 

}, 3000);

請參閱我的小提琴：

JsFiddle

來源

2013-10-30 01:20:54

創建一個旋轉木馬，顯示元素數量，隱藏並顯示下一個元素的數量

回答

相關問題