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/