如何使用jQuery改变背景图片

首先，我们需要在 HTML 中引入 jQuery 库文件。

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

然后，在 JavaScript 中使用 jQuery 改变背景图片，这里提供两个示例：

示例一：点击按钮改变背景图片

首先，我们需要在 HTML 中定义一个按钮，当按钮被点击时，触发 jQuery 函数改变背景图片。

<button id="change-btn">Change Background</button>

接下来，在 JavaScript 中绑定按钮的点击事件，并使用 jQuery 改变背景图片。

$(document).ready(function() {
  $('#change-btn').click(function() {
    $('body').css('background-image', 'url("new-background-image.jpg")');
  });
});

以上代码说明：当页面加载完成时，该函数会自动执行。找到 ID 为 change-btn 的按钮，绑定它的点击事件。当按钮被点击时，使用 jQuery 选择器找到 body 元素，并修改其背景图片为 new-background-image.jpg。

示例二：轮播背景图片

我们可以通过设置定时器，使背景图片实现轮播效果。首先，我们需要在 HTML 中定义一个 div 容器，用于显示背景图片。

<div id="background-container"></div>

接下来，在 JavaScript 中，定义一个数组存储所有需要轮播的背景图片链接。

var images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
]

然后，使用 setInterval 函数实现轮播功能。

$(document).ready(function() {
  var i = 0;
  setInterval(function() {
    $('#background-container').css('background-image', 'url("'+images[i]+'")');
    i = (i+1) % images.length;
  }, 5000); // 每隔 5 秒切换一次背景图片
});

以上代码说明：当页面加载完成后，该函数会自动执行。定义变量 i 存储当前显示的背景图片索引，然后使用 setInterval 函数，每隔一段时间调用一次函数，同时修改 background-container 容器的背景图片链接，并更新 i，以达到轮播效果。

以上两个示例都使用了 jQuery 选择器来找到需要修改的元素，并使用 css 函数改变其属性。这是 jQuery 的基础使用方法，可以根据需要进行适当的修改。