js单击改变背景图片

基础概念

在JavaScript中，可以通过监听点击事件来改变HTML元素的背景图片。这通常涉及到DOM操作和事件处理。

类型与应用场景

轮播图：在网页上创建一个图片轮播，用户可以点击切换到下一张图片。
主题切换：允许用户点击按钮更改网站的整体风格或主题。
广告展示：点击广告区域更换广告内容。

示例代码

以下是一个简单的示例，展示了如何在点击按钮时改变一个div元素的背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Background Image</title>
<style>
  #bgDiv {
    width: 300px;
    height: 200px;
    background-image: url('initial.jpg'); /* 初始背景图片 */
    background-size: cover;
  }
</style>
</head>
<body>

<div id="bgDiv"></div>
<button onclick="changeBackground()">Change Background</button>

<script>
function changeBackground() {
  var div = document.getElementById('bgDiv');
  // 随机选择一张图片
  var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  var randomImage = images[Math.floor(Math.random() * images.length)];
  div.style.backgroundImage = 'url(' + randomImage + ')';
}
</script>

</body>
</html>