37932-vm/wp-content/mu-plugins/shihao-slider.php

<?php
/**
 * Plugin Name: 世豪轮播图
 * Description: 为首页提供高清大图轮播功能。
 */

function shihao_slider_shortcode() {
    $images = [
        [
            'url' => 'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            'title' => '专业网站建设',
            'desc' => '打造极具吸引力的企业数字化门户'
        ],
        [
            'url' => 'https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            'title' => '定制软件开发',
            'desc' => '满足您独特业务需求的个性化解决方案'
        ],
        [
            'url' => 'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
            'title' => '移动应用开发',
            'desc' => '连接用户，拓展无限商业可能'
        ]
    ];

    ob_start();
    ?>
    <div class="shihao-slider">
        <div class="shihao-slider-inner">
            <?php foreach ($images as $index => $img): ?>
                <div class="shihao-slide <?php echo $index === 0 ? 'active' : ''; ?>" style="background-image: url('<?php echo $img['url']; ?>');">
                    <div class="shihao-slide-content">
                        <h2><?php echo $img['title']; ?></h2>
                        <p><?php echo $img['desc']; ?></p>
                        <a href="#contact" class="shihao-slide-btn">立即咨询</a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <div class="shihao-slider-nav">
            <button class="prev">&lt;</button>
            <button class="next">&gt;</button>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slides = document.querySelectorAll('.shihao-slide');
            const next = document.querySelector('.shihao-slider-nav .next');
            const prev = document.querySelector('.shihao-slider-nav .prev');
            let current = 0;

            function showSlide(index) {
                slides.forEach(s => s.classList.remove('active'));
                slides[index].classList.add('active');
            }

            next.addEventListener('click', () => {
                current = (current + 1) % slides.length;
                showSlide(current);
            });

            prev.addEventListener('click', () => {
                current = (current - 1 + slides.length) % slides.length;
                showSlide(current);
            });

            setInterval(() => {
                current = (current + 1) % slides.length;
                showSlide(current);
            }, 5000);
        });
    </script>
    <style>
        .shihao-slider {
            position: relative;
            height: 600px;
            overflow: hidden;
            border-radius: 20px;
            margin-bottom: 40px;
        }
        .shihao-slider-inner {
            height: 100%;
        }
        .shihao-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .shihao-slide::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
        }
        .shihao-slide.active {
            opacity: 1;
            z-index: 1;
        }
        .shihao-slide-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 20px;
        }
        .shihao-slide-content h2 {
            font-size: 4rem;
            margin-bottom: 20px;
            color: #fff;
        }
        .shihao-slide-content p {
            font-size: 1.5rem;
            margin-bottom: 30px;
        }
        .shihao-slide-btn {
            display: inline-block;
            padding: 15px 40px;
            background: #0066FF;
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: background 0.3s;
        }
        .shihao-slide-btn:hover {
            background: #0052cc;
        }
        .shihao-slider-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 10;
        }
        .shihao-slider-nav button {
            background: rgba(255,255,255,0.3);
            border: none;
            color: white;
            padding: 15px;
            cursor: pointer;
            border-radius: 50%;
            font-size: 1.5rem;
            transition: background 0.3s;
        }
        .shihao-slider-nav button:hover {
            background: rgba(255,255,255,0.5);
        }
        @media (max-width: 768px) {
            .shihao-slider { height: 400px; }
            .shihao-slide-content h2 { font-size: 2.5rem; }
            .shihao-slide-content p { font-size: 1.1rem; }
        }
    </style>
    <?php
    return ob_get_clean();
}
add_shortcode('shihao_slider', 'shihao_slider_shortcode');