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

如何使用Backgrounder jQuery插件作为幻灯片？

1 个答案: