php 首页图片效果

<?php
// 假设图片路径存储在数据库中
$images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
];

// 获取当前显示的图片索引
$currentImageIndex = isset($_GET['img']) ? intval($_GET['img']) : 0;
if ($currentImageIndex >= count($images)) {
    $currentImageIndex = 0;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        .carousel {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        .carousel img {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .carousel img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <?php foreach ($images as $index => $image): ?>
            <img src="<?php echo $image; ?>" alt="Image <?php echo $index + 1; ?>" class="<?php echo $index == $currentImageIndex ? 'active' : ''; ?>">
        <?php endforeach; ?>
    </div>
    <script>
        let currentIndex = <?php echo $currentImageIndex; ?>;
        const images = document.querySelectorAll('.carousel img');
        setInterval(() => {
            images[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % images.length;
            images[currentIndex].classList.add('active');
        }, 3000);
    </script>
</body>
</html>