4個圖像與jQuery

Question

無限循環我有下面的代碼：

$(document).ready(function() { 
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500); 
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500); 
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500); 
}); 

它更像是一個操場用jQuery。那麼，首先我想讓第一張圖像淡入，然後是第二張，然後是最後一張。在此之後，我希望所有圖像在加載完成後淡出。

但我想兩個新問題：

1. 創建一個無限循環

2. 使用超過3張圖片，但只能一次顯示3（我知道這可能會影響ID對改成別的東西）

任何想法？

我不會在這裏發佈我如何努力實現循環，只有一個有趣的方法：

$(document).ready(function() { 
    function runPics() { 
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500); 
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500); 
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500); 
    } interval = setInterval(runPics, 3500); 
}); 

此代碼太爛了，對不對？ ：P

Answer 1

嘗試：

$(function(){ 
    var images = ['#imgone', '#imgtwo', '#imgthree'], 
     imgIx = 0; 

    (function nextImage(){ 
     $(images[imgIx++] || images[imgIx = 0, imgIx++]).hide().delay(500).fadeIn(1000).delay(1000).fadeOut(500, nextImage); 
    })(); 
}); 

​​

---

或在同一時間以顯示隨機圖像，3：

<div id="parent"> 
    <div id="imgone" style="display:none;">one</div> 
    <div id="imgtwo" style="display:none;">two</div> 
    <div id="imgthree" style="display:none;">three</div> 
    <div id="imgfour" style="display:none;">four</div> 
    <div id="imgfive" style="display:none;">five</div> 
    <div id="imgsix" style="display:none;">six</div> 
</div> 

<script> 
$(function(){ 
    var images = ['#imgone', '#imgtwo', '#imgthree', '#imgfour', '#imgfive', '#imgsix'], 
     parent = $('#parent'); 

    (function nextImage(){ 
     var imgs = images.slice(); 
     for(var i=0; i<3; i++){ 
      parent.append(
       $(imgs.splice(0|Math.random() * imgs.length, 1)[0]).hide().delay(1000*i+500).fadeIn(1000).delay(4500-(1000*i)).fadeOut(500, i ? $.noop : nextImage) 
      ); 
     } 
    })(); 
}); 
</script> 

jsfiddle

Answer 2

$(document).ready(function() { 
    function runPics(){ 
     $('#imgone').delay(500).fadeIn(1000,function(){ 
      $('#imgtwo').fadeIn(1000,function(){ 
       $('#imgthree').fadeIn(1000,function(){ 
        $('#imgone').fadeOut(500,function(){ 
         $('#imgtwo').fadeOut(500,function(){ 
          $('#imgthree').fadeOut(500,function(){ 
           runPics(); 
          }) 
         }) 
        }) 
       }) 
      }) 
     }) 
    }; 
    runPics(); 
}); 

我會這樣做。我認爲完成每個部分更合乎邏輯，然後完成每個部分，然後移到下一個位，而不是從一開始就設置定時器的負載。

在所有其他事情完成後，循環只是從內部運行函數。

此代碼未經測試。

編輯：在迴應評論，我更新的代碼...

$(document).ready(function() { 
    function runPics(){ 
     $('#imgone').delay(500).fadeIn(1000,function(){ 
      $('#imgtwo').fadeIn(1000,function(){ 
       $('#imgthree').fadeIn(1000,function(){ 
        $('#imgone').fadeOut(500) 
        $('#imgtwo').fadeOut(500) 
        $('#imgthree').fadeOut(500,function(){ 
         $('#imgone').attr({src:'alreadyCachedImage.jpg'}) 
         runPics(); 
        }) 
       }) 
      }) 
     }) 
    }; 
    runPics(); 
}); 

Answer 3

我會做這樣的事情：

$('document').ready(function() { 
    var $imgs = $('#slideshow > img'), current = 0; 

    var nextImage = function() { 
     if (current >= $imgs.length) current = 0; 
     $imgs.eq(current++).fadeIn(function() { 
      $(this).delay(3000).fadeOut(nextImage); 
     }) 
    }; 
    nextImage(); 
}); 

小提琴：http://jsfiddle.net/JbrXd/4/