如何使用CSS和JavaScript动态更换网页背景图片？

使用document对象和style属性

1、获取元素并修改背景图片：通过document.getElementById()等方法获取要更换背景图片的元素，然后直接修改其style.backgroundImage属性。

HTML代码：

     <div id="myDiv" style="width: 200px; height: 200px; background-image: url('old-image.jpg');">
         Sample Text
     </div>
     <button onclick="changeBackground()">Change Background</button>

JavaScript代码：

     function changeBackground() {
         var element = document.getElementById('myDiv');
         element.style.backgroundImage = "url('new-image.jpg')";
     }

当点击按钮时，会将myDiv元素的背景图片更换为new-image.jpg。

2、动态生成背景图片：可以根据用户输入或其他条件动态生成背景图片，通过输入框让用户输入图片的URL，然后更改背景图片：

HTML代码：

     <div id="myDiv" style="width: 200px; height: 200px; background-image: url('old-image.jpg');">
         Sample Text
     </div>
     <input type="text" id="imageUrl" placeholder="Enter image URL">
     <button onclick="changeBackground()">Change Background</button>

JavaScript代码：

     function changeBackground() {
         var imageUrl = document.getElementById('imageUrl').value;
         var element = document.getElementById('myDiv');
         element.style.backgroundImage = "url('" + imageUrl + "')";
     }

用户可以在输入框中输入新的图片URL，点击按钮后背景图片将被更改为用户输入的图片。

使用类选择器

1、定义CSS类：在CSS文件中定义多个类，每个类对应不同的背景图片。

   /* styles.css */
   .bg-old {
       background-image: url('old-image.jpg');
   }
   .bg-new {
       background-image: url('new-image.jpg');
   }

2、使用JavaScript更改类：在JavaScript中使用classList属性来添加或移除这些类，从而更改背景图片。

HTML代码：

     <div id="myDiv" class="bg-old" style="width: 200px; height: 200px;">
         Sample Text
     </div>
     <button onclick="changeBackground()">Change Background</button>

JavaScript代码：

     function changeBackground() {
         var element = document.getElementById('myDiv');
         element.classList.remove('bg-old');
         element.classList.add('bg-new');
     }

点击按钮后，myDiv元素的背景图片将从bg-old类定义的图片变为bg-new类定义的图片。

结合事件监听器

1、鼠标悬停事件：可以使用addEventListener方法监听元素的mouseover事件，当鼠标悬停在元素上时更换背景图片。

HTML代码：

     <div id="myDiv" style="width: 200px; height: 200px; background-image: url('old-image.jpg');">
         Sample Text
     </div>

CSS代码：

     #myDiv:hover {
         background-image: url('hover-image.jpg');
     }

当鼠标悬停在myDiv元素上时，背景图片将更换为hover-image.jpg。

2、点击事件：可以监听元素的click事件，当点击元素时更换背景图片。

HTML代码：

     <div id="myDiv" style="width: 200px; height: 200px; background-image: url('old-image.jpg');">
         Sample Text
     </div>

JavaScript代码：

     document.getElementById('myDiv').addEventListener('click', function() {
         this.style.backgroundImage = "url('click-image.jpg')";
     });

当点击myDiv元素时，背景图片将更换为click-image.jpg。

使用定时器自动更换背景图片

1、定义图片数组和定时器函数：定义一个包含多个图片URL的数组，然后使用setInterval函数设置定时器，每隔一定时间更换一次背景图片。

HTML代码：

     <div id="myDiv" style="width: 200px; height: 200px; background-image: url('old-image.jpg');">
         Sample Text
     </div>

JavaScript代码：

     function startBackgroundRotation() {
         const images = [
             'url(image1.jpg)',
             'url(image2.jpg)',
             'url(image3.jpg)'
         ];
         let currentIndex = 0;
         setInterval(() => {
             document.getElementById('myDiv').style.backgroundImage = images[currentIndex];
             currentIndex = (currentIndex + 1) % images.length;
         }, 5000); // 每5秒更换一次
     }
     window.onload = startBackgroundRotation;

页面加载完成后，myDiv元素的背景图片将每5秒自动更换一次。

使用CSS动画库（如Animate.css）实现平滑过渡效果

1、引入CSS动画库：首先需要引入Animate.css动画库，可以通过CDN方式引入。

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

2、添加动画效果和JavaScript代码：给元素添加动画效果，并在JavaScript中控制背景图片的更换和动画播放。

HTML代码：

     <div id="myDiv" class="animated" style="width: 200px; height: 200px; background-image: url('old-image.jpg');">
         Sample Text
     </div>
     <button onclick="changeBackgroundWithAnimation()">Change Background</button>

CSS代码：

     #myDiv {
         animation-duration: 1s;
         animation-fill-mode: forwards;
     }

JavaScript代码：

     function changeBackgroundWithAnimation() {
         const images = [
             'url(image1.jpg)',
             'url(image2.jpg)',
             'url(image3.jpg)'
         ];
         const randomIndex = Math.floor(Math.random() * images.length);
         document.getElementById('myDiv').style.animationName = 'fadeIn'; // 假设使用淡入效果的动画名称为fadeIn
         setTimeout(() => {
             document.getElementById('myDiv').style.backgroundImage = images[randomIndex];
         }, 0); // 先触发动画，再更换背景图片，以实现平滑过渡效果
     }

点击按钮后，myDiv元素的背景图片将随机更换，并伴有淡入的动画效果。