一系列图片上如何使用jQuery实现自动淡入淡出效果？

Question

我基本上想制作一个幻灯片，图片会在大约5秒钟后淡入淡出。幻灯片上有一堆图片，而不是并排的。我该如何让img1在5秒后淡出并使img2淡入，然后让img2在另外5秒后淡出并使img3淡入，以此类推？

我考虑使用setInterval()函数，但我不知道它是如何工作的。也许可以使用delay()函数？

- bigpotato

Answer 1

您不需要插件。只需几行代码即可轻松完成：

HTML

    <div id="images">
    <ul
        ><li><img src="img/11.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/12.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/13.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/14.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/15.jpg" width="520" height="203" alt="" /></li
        ><li><img src="img/5.jpg" width="520" height="203" alt="" /></li
    ></ul>
</div>

CSS

#images ul{position:absolute;right:9px;top:1px;width:520px;height:202px;list-style:none;overflow:hidden}
#images li{display:none;position:absolute;left:0;top:0;}

JS

$(document).ready(
  function() {
    var i = 0, j = 0; 
    var imgs = $('#header ul').children();
    runIt(imgs);

    function runIt() {
      $(imgs).eq(i).fadeIn(3000, function() {
        setTimeout(runIt,'200');
      });
      i = i + 1; 
      if (i == imgs.length) {
        i = 0; $('#images li').fadeOut(1000)
      } 
    }
});

- Moin Zaman

---

那段代码实际上可以更好。你不需要使用 new Array() 来初始化 imgs，因为 .children() 方法会返回一个类似数组的集合。 - danwellman

这里的 j = 0 是在做什么？ - David Rhoden

Answer 2

为什么不使用一个能够实现这个功能的插件呢？市面上有很多这样的插件，包括cycle。

- danwellman

---

特别是 light 版本，非常小巧实用。 - elclanrs

我听说过插件，但我是个初学者，所以在采取捷径之前，我尽量手动完成尽可能多的工作。 - bigpotato

这很公平，我完全支持学习；) 还有很多优秀的教程可以帮助你完成像这样生成小部件的项目：https://www.google.co.uk/search?q=jquery+slideshow+tutorial - danwellman

Answer 3

当我尝试在一个切片画廊中使用淡入淡出效果时，我遇到了IE浏览器的问题。我使用的是jQuery库 "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"。当我改用 "http://code.jquery.com/jquery-1.9.1.js" 库后，IE、Chrome和FF都没有问题，我可以跳过所有修改。

- RobertoFRey