Question

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

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

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

Answer 2

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

Answer 3

当我尝试将fadein和fadeout用于切片库时，我遇到了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的一切正常，我可以跳过所有修改。

jquery自动淡化fadeOut上的一系列图像？

3 个答案: