3

I'm essentially trying to make a slideshow where images fade in and fade out after 5 seconds or so. The slideshow a bunch of images stacked on top of each other, not side by side. How would I make img1 fadeOut and img2 fadeIn after 5 seconds, then have img2 fadeout and img3 fadein after another 5 seconds, etc.?

I was thinking of using the setInterval() function, but I don't know how it works. Maybe delay()?

4

3 回答 3

3

你不需要插件。用几行代码很容易做到：

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)
      } 
    }
});
于 2012-08-15T22:10:44.440 回答
2

Why not use a plugin that does this? There are tons of them out there, including cycle

于 2012-08-15T22:03:18.040 回答
1

当我尝试对切片库使用淡入和淡出时，我遇到了 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 一切正常，我可以跳过所有修改。

于 2013-06-08T00:04:18.043 回答