phpcms 焦点图代码

基础概念

phpcms 是一个基于 PHP 和 MySQL 的内容管理系统（CMS），它提供了丰富的功能来帮助用户管理和发布网站内容。焦点图（Slider 或 Carousel）是网站设计中常见的一种元素，用于展示一系列图片或内容，并且通常具有自动播放、导航箭头、指示器等功能。

类型

图片焦点图：仅展示图片。
图文结合焦点图：图片和文字结合展示。
视频焦点图：展示视频内容。
自定义内容焦点图：根据需求自定义展示内容。

应用场景

首页轮播图
产品展示
活动宣传
新闻动态

焦点图代码示例

以下是一个简单的 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>