php版 简洁好看的随机图片/视频 支持 ajax 刷新 自适应

仅支持图片的：https://blog.syylw.com/158.html

支持视频的在此基础上：

get_random_media.php文件

<?php
header('Content-Type: application/json');

$mediaFile = 'images.txt';
$lines = file($mediaFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);

if (empty($lines)) {
    echo json_encode(['error' => 'No media available']);
    exit;
}

$randomLine = $lines[array_rand($lines)];
list($type, $url) = explode('|', $randomLine, 2); // 假设用'|'分隔类型和URL

echo json_encode([
    'type' => trim($type),
    'url' => trim($url)
]);
?>

index.php或index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Media Display with Ajax</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 样式与之前相同 */
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            text-align: center;
        }
        img, video {
            max-width: 100%;
            max-height: 80vh;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        #changeImageButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        #changeImageButton i {
            font-size: 1.2em;
        }
        /* 新增加载状态样式 */
        #loadingOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none; /* 默认隐藏 */
        }
        #loadingOverlay i {
            font-size: 2em;
            color: white;
        }
    </style>
</head>
<body>
    <div id="loadingOverlay">
        <i class="fa-solid fa-spinner fa-spin"></i> <!-- 加载图标 -->
    </div>
    <div id="mediaContainer">
        <img id="randomImage" src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="Random Image will appear here">
    </div>
    <button id="changeImageButton">
        <i class="fa-solid fa-rotate-right"></i>
        点击换一张
    </button>

    <script>
function getRandomMedia() {
    const loadingOverlay = document.getElementById('loadingOverlay');
    loadingOverlay.style.display = 'flex'; // 显示加载状态

    fetch('get_random_media.php')
        .then(response => response.json())
        .then(data => {
            loadingOverlay.style.display = 'none'; // 隐藏加载状态
            if (data && data.type && data.url) {
                const mediaContainer = document.getElementById('mediaContainer');
                mediaContainer.innerHTML = ''; // 清空容器
                if (data.type === 'image') {
                    const img = document.createElement('img');
                    img.src = data.url;
                    img.alt = 'Random Image';
                    mediaContainer.appendChild(img);
                } else if (data.type === 'video') {
                    const video = document.createElement('video');
                    video.autoplay = true; // 自动播放
                    video.loop = true; // 循环播放
                    video.playsInline = true; // 在iOS和其他移动设备上保持内联播放
                    video.muted = false; // 静音播放以允许自动播放,填：true则默认静音播放
                    video.src = data.url;
                    mediaContainer.appendChild(video);

                    // 如果您不想要默认的播放控件，可以去掉下面这一行
                    video.controls = true;
                }
            } else {
                alert('Failed to load a new media. Please try again later.');
            }
        })
        .catch(error => {
            loadingOverlay.style.display = 'none'; // 隐藏加载状态
            console.error('Error fetching new media:', error);
            alert('An error occurred while fetching a new media. Please try again later.');
        });
}

        // 为按钮添加点击事件监听器
        document.getElementById('changeImageButton').addEventListener('click', getRandomMedia);
    </script>
</body>
</html>

images.txt文件

image|https://example.com/path/to/image.jpg
video|https://example.com/path/to/video.mp4

php版简洁好看的随机图片/视频支持 ajax 刷新自适应

January 8, 2025 • Read: 33 • More

get_random_media.php文件

index.php或index.html文件

images.txt文件