Question

在＆lt; div id="highlighted">样式中有此背景图片

background: url(image.jpg) top center no-repeat transparent;

我想要做的是包含一个要更改的背景图像列表，就像一个带有淡出或其他东西的简单jquery幻灯片。

如何通过简单的jQuery编码来实现这一目标？

Answer 1

看看这个插件 http://srobbin.com/jquery-plugins/backstretch/

非常好用

 $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});

Answer 2

试试这样：

<script type="text/javascript">
var images = ["image.jpg",Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"];
$(function () {
    var i = 0;
    $("#highlighted").css("background-image", "url(images/" + images[i] + ")");
    setInterval(function () {
        i++;
        if (i == images.length) {
            i = 0;
        }
        $("#highlighted").fadeOut("slow", function () {
            $(this).css("background-image", "url(images/" + images[i] +  ")");
            $(this).fadeIn("slow");
        });
    }, 1000);
    });
</script>

简单的jQuery以幻灯片形式更改背景图像？

2 个答案: