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

Simple jQuery to change background images in the form of a slideshow?

本文关键字：图像 背景 jQuery 幻灯片 简单      更新时间：2023-09-26

在<div id="highlighted">样式中，有这个背景图像>

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

我想做的是包含要更改的背景图像列表，例如带有淡出或其他内容的简单jquery幻灯片。

如何使用简单的jQuery编码来做到这一点？

看看这个插件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});

尝试如下：

<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>
相关文章：