jquery 随机背景图

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。随机背景图是指在网页上动态地设置不同的背景图片，以增加页面的视觉效果和用户体验。

类型

纯 JavaScript 实现：通过 JavaScript 代码直接实现随机背景图的切换。
jQuery 插件：使用现成的 jQuery 插件来实现随机背景图的功能。

应用场景

网站首页：在网站的首页设置随机背景图，可以吸引用户的注意力。
广告页面：在广告页面使用随机背景图，可以增加广告的吸引力。
个性化设置：为用户提供随机背景图的选择，增加用户的个性化体验。

示例代码

以下是一个使用 jQuery 实现随机背景图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Background Image</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <script>
        $(document).ready(function() {
            var images = [
                'image1.jpg',
                'image2.jpg',
                'image3.jpg',
                // 添加更多图片路径
            ];

            function setRandomBackground() {
                var randomIndex = Math.floor(Math.random() * images.length);
                $('body').css('background-image', 'url(' + images[randomIndex] + ')');
            }

            setRandomBackground();
        });
    </script>
</body>
</html>