jquery自动淡入淡出一系列图像？答案

【问题标题】：jquery automatic fadeIn fadeOut on a series of images?jquery自动淡入淡出一系列图像？
【发布时间】：2012-08-15 22:01:01
【问题描述】：

我实际上是在尝试制作幻灯片，其中图像在 5 秒左右后淡入淡出。幻灯片显示一堆堆叠在一起的图像，而不是并排。我如何在 5 秒后让 img1 fadeOut 和 img2 fadeIn，然后在 5 秒后让 img2 fadeout 和 img3 fadein 等？

我正在考虑使用 setInterval() 函数，但我不知道它是如何工作的。也许延迟（）？

【问题讨论】：

标签： javascript jquery fadein fadeout

【解决方案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;}

$(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)
      } 
    }
});

【讨论】：

该代码可能会更好。您不需要使用 new Array() 初始化 imgs，因为 .children() 将返回一个类似数组的集合。
j = 0 在这里做什么？

【解决方案2】：

为什么不使用这样的插件呢？那里有很多，包括cycle

【讨论】：

特别是light 版本，小巧实用。
是的，我听说过插件，但我是初学者，所以在走捷径之前，我会尽可能多地用手做。
这很公平，我完全是为了学习 ;) 还有很多很棒的教程可以引导你完成生成像这样的小部件的项目：google.co.uk/search?q=jquery+slideshow+tutorial

【解决方案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 一切正常，我可以跳过所有修改。

【讨论】：