phpcms 焦点图代码

<?php
// 假设我们有一个焦点图的数据数组
$slider_items = [
    ['image' => 'image1.jpg', 'title' => 'Title 1', 'link' => 'https://example.com/1'],
    ['image' => 'image2.jpg', 'title' => 'Title 2', 'link' => 'https://example.com/2'],
    ['image' => 'image3.jpg', 'title' => 'Title 3', 'link' => 'https://example.com/3'],
];

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点图示例</title>
    <style>
        .slider {
            width: 100%;
            overflow: hidden;
        }
        .slider-item {
            width: 100%;
            display: none;
        }
        .slider-item.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="slider">
        <?php foreach ($slider_items as $item): ?>
            <div class="slider-item <?php echo $item === reset($slider_items) ? 'active' : ''; ?>">
                <a href="<?php echo $item['link']; ?>">
                    <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['title']; ?>">
                    <h3><?php echo $item['title']; ?></h3>
                </a>
            </div>
        <?php endforeach; ?>
    </div>

    <script>
        let currentIndex = 0;
        const items = document.querySelectorAll('.slider-item');
        const totalItems = items.length;

        function showItem(index) {
            items.forEach((item, i) => {
                item.classList.remove('active');
            });
            items[index].classList.add('active');
        }

        function nextItem() {
            currentIndex = (currentIndex + 1) % totalItems;
            showItem(currentIndex);
        }

        setInterval(nextItem, 3000); // 每3秒切换一次
    </script>
</body>
</html>