jquery - 如何将 Backgrounder jQuery 插件用作幻灯片？

Question

我正在尝试使用jQuery Backgrounder Plugin作为幻灯片，但效果不佳。我真的很感激任何帮助。谢谢。这是我到目前为止所得到的：

HTML：

<div id="my_background">
   <img src="/img/main/home.jpg" />
   <img src="/img/main/home-2.jpg" />
</div>

jQuery 调用：

$(function() {
      setInterval( $('#my_background').backgrounder({element : '#content-bg'}) , 5000 );
    });

jQuery插件

换行

var img = $(this).children('img').first();

到

var img = $(this).children('img').next();

它应该每 5 秒切换一次图像，但它不起作用。我究竟做错了什么？

Answer 1

像这样的东西应该可以解决问题，而无需修改插件代码：

http://jsfiddle.net/WZ3TL/

HTML

<div id="my_background"></div>
<div id="content-bg"></div>
​

JS

$(function() {

    //list of images
    var images = [
        'http://flickholdr.com/1200/600/landscape/bw',
        'http://flickholdr.com/1200/600/landscape/2'
    ];

    function rotate(){

        //get first images from the list
        var img = images.shift();
        //put it a the end of the list again
        images.push(img);

        //put image in source container
        $('#my_background').html('');
        $('<img/>').attr('src', img).appendTo($('#my_background'));

        //call backgrounder (again)
        $('#my_background').backgrounder({
            element: '#content-bg'
        });
    }

    //initial call
    rotate();

    //call in interval
    setInterval( rotate, 1000 );
});

​</p>