<?php
// 文件修改时间：2025-12-11 13:09:50
/**
 * Banner区块模板 - 使用原生JavaScript轮播
 * 支持自定义器设置和短代码调用
 */

if (!defined('ABSPATH')) {
    exit;
}

// 获取短代码参数（如果通过短代码调用）
global $banner_shortcode_atts;

// 确保 $banner_shortcode_atts 是数组
if (!is_array($banner_shortcode_atts)) {
    $banner_shortcode_atts = array();
}

$banner_id = isset($banner_shortcode_atts['id']) ? sanitize_html_class($banner_shortcode_atts['id']) : 'nenghui-banner-' . uniqid();
$banner_class = isset($banner_shortcode_atts['class']) ? $banner_shortcode_atts['class'] : '';
$autoplay = isset($banner_shortcode_atts['autoplay']) ? $banner_shortcode_atts['autoplay'] : (get_theme_mod('banner_autoplay', true) ? 'true' : 'false');

// 获取自定义器全局设置
$banner_height = get_theme_mod('banner_height', '500px');
// 处理高度值，确保包含单位
if (is_numeric($banner_height)) {
    $banner_height = $banner_height . 'px';
}
// 验证高度值格式
if (!preg_match('/^\d+(\.\d+)?(px|vh)$/', $banner_height)) {
    $banner_height = '500px'; // 默认值
}
$autoplay_delay = get_theme_mod('banner_autoplay_delay', 5000);
$overlay_enabled = get_theme_mod('banner_overlay_enabled', true);
$image_only_mode = get_theme_mod('banner_image_only_mode', false);
$navigation_enabled = get_theme_mod('banner_navigation_enabled', true);
$zoom_animation_enabled = get_theme_mod('banner_zoom_animation_enabled', true);
$zoom_animation_duration = get_theme_mod('banner_zoom_animation_duration', 20);
$zoom_animation_scale = get_theme_mod('banner_zoom_animation_scale', 1.08);
// 获取移动端显示控制设置
$show_on_mobile = get_theme_mod('banner_show_on_mobile', true);

// 获取Banner数量设置和显示顺序
$banner_count = get_theme_mod('banner_count', 3);
$banner_display_order = get_theme_mod('banner_display_order', '1,2,3,4,5');

// 解析显示顺序
$order_array = array_map('trim', explode(',', $banner_display_order));
$order_array = array_filter($order_array, function($value) {
    return is_numeric($value) && $value >= 1 && $value <= 5;
});

// 如果顺序设置无效，使用默认顺序
if (empty($order_array)) {
    $order_array = range(1, $banner_count);
}

// 从自定义器获取Banner数据
$banner_images = array();
$default_placeholder = get_template_directory_uri() . '/assets/images/NaN-img.png';

// 按照设置的顺序处理Banner
foreach ($order_array as $i) {
    // 确保不超过设置的Banner数量
    if (count($banner_images) >= $banner_count) {
        break;
    }
    
    $image_url = get_theme_mod('banner_image_' . $i, '');
    $video_url = get_theme_mod('banner_video_' . $i, '');
    
    // 增加视频格式验证
    if (!empty($video_url)) {
        $video_ext = pathinfo(parse_url($video_url, PHP_URL_PATH), PATHINFO_EXTENSION);
        if (!in_array(strtolower($video_ext), ['mp4', 'webm', 'ogg'])) {
            $video_url = ''; // 过滤非允许格式的视频
        }
    }
    
    // 只有上传了图片或视频的Banner才会被添加到数组中
    if (!empty($image_url) || !empty($video_url)) {
        $content = get_theme_mod('banner_content_' . $i, '<h2>Banner标题 ' . $i . '</h2><p>这里是Banner描述文字，可以介绍您的产品或服务。</p>');
        $button_text = get_theme_mod('banner_button_text_' . $i, '了解更多');
        $button_url = get_theme_mod('banner_button_url_' . $i, '#');
        
        $banner_images[] = array(
            'image' => $image_url,
            'video' => $video_url,
            'content' => $content,
            'button_text' => $button_text,
            'button_url' => $button_url,
            'original_index' => $i
        );
    }
}

// 如果没有有效的Banner图片或视频，显示默认占位图片
if (empty($banner_images)) {
    $banner_images[] = array(
        'image' => $default_placeholder,
        'video' => '',
        'content' => '<h2>欢迎使用Banner</h2><p>请在WordPress自定义器中上传Banner图片或视频。</p>',
        'button_text' => '了解更多',
        'button_url' => '#'
    );
}

?>

<style>
/* Mobile Hide Logic - High Priority */
@media (max-width: 991.98px) {
    #<?php echo esc_attr($banner_id); ?>.hide-on-mobile,
    #<?php echo esc_attr($banner_id); ?>.hide-on-mobile *,
    .nenghui-banner.hide-on-mobile,
    .nenghui-banner.hide-on-mobile * {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        position: absolute !important;
        z-index: -9999 !important;
    }
}
</style>

<!-- Debug: show_on_mobile = <?php echo var_export($show_on_mobile, true); ?> -->
<!-- Native JS Banner Container -->
<div id="<?php echo esc_attr($banner_id); ?>" class="banner-section nenghui-banner <?php echo esc_attr($banner_class); ?> <?php echo $zoom_animation_enabled ? 'zoom-animation-enabled' : ''; ?> <?php echo ($show_on_mobile === false || $show_on_mobile === '0' || $show_on_mobile === 0) ? 'hide-on-mobile' : ''; ?>" data-autoplay="<?php echo esc_attr($autoplay); ?>" data-delay="<?php echo esc_attr($autoplay_delay); ?>" data-zoom-animation="<?php echo esc_attr($zoom_animation_enabled ? 'true' : 'false'); ?>" data-aos="fade-up">
    <!-- Banner wrapper -->
    <div class="banner-wrapper" data-aos="fade-up" data-aos-delay="200">
        <?php foreach ($banner_images as $index => $banner): ?>
        <!-- Slide -->
        <div class="banner-slide <?php echo $index === 0 ? 'active' : ''; ?>" data-has-video="<?php echo !empty($banner['video']) ? 'true' : 'false'; ?>" <?php if (!empty($banner['video'])): ?>data-video-src="<?php echo esc_url($banner['video']); ?>"<?php endif; ?> <?php if (empty($banner['video'])): ?>style="background-image: url('<?php echo esc_url($banner['image']); ?>')"<?php endif; ?>>
            <?php if (!empty($banner['video'])): ?>
            <?php if (!empty($banner['image'])): ?>
            <img class="banner-video-fallback" src="<?php echo esc_url($banner['image']); ?>" alt="Video fallback" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;">
            <?php endif; ?>
            <div class="video-loading"><div class="spinner"></div></div>
            <?php endif; ?>
            <?php if ($overlay_enabled): ?>
            <div class="banner-overlay"></div>
            <?php endif; ?>
            <?php if (!$image_only_mode && empty($banner['video'])): ?>
            <div class="banner-content" data-aos="fade-up" data-aos-delay="400">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-8 offset-lg-1">
                            <div class="banner-text-content">
                                <?php echo wp_kses_post($banner['content']); ?>
                            </div>
                            <a href="<?php echo esc_url($banner['button_url']); ?>" class="btn btn-primary banner-btn">
                                <?php echo esc_html($banner['button_text']); ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endif; ?>
        </div>
        <?php endforeach; ?>
    </div>
    
    <!-- Pagination dots -->
    <?php if (count($banner_images) > 1): ?>
    <div class="banner-pagination" data-aos="fade-up" data-aos-delay="600">
        <?php foreach ($banner_images as $index => $banner): ?>
        <span class="pagination-dot <?php echo $index === 0 ? 'active' : ''; ?>" data-slide="<?php echo $index; ?>"></span>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
    
    <!-- Navigation buttons -->
    <?php if ($navigation_enabled && count($banner_images) > 1): ?>
    <div class="banner-button-prev" data-aos="fade-up" data-aos-delay="800">‹</div>
    <div class="banner-button-next" data-aos="fade-up" data-aos-delay="800">›</div>
    <?php endif; ?>
</div>

<?php if ($show_on_mobile === false || $show_on_mobile === '0' || $show_on_mobile === 0): ?>
<script>
(function() {
    function hideMobileBanner() {
        if (window.innerWidth <= 992) {
            var banner = document.getElementById('<?php echo esc_js($banner_id); ?>');
            if (banner) {
                banner.style.display = 'none';
                banner.style.height = '0';
                banner.style.overflow = 'hidden';
            }
        }
    }
    // Run on load and resize
    window.addEventListener('load', hideMobileBanner);
    window.addEventListener('resize', hideMobileBanner);
    // Run immediately
    hideMobileBanner();
})();
</script>
<?php endif; ?>

<style>
.nenghui-banner {
    width: 100%;
    height: <?php echo esc_attr($banner_height); ?>;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.nenghui-banner .banner-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.nenghui-banner .banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

/* 背景图片缩放动画效果 */
.nenghui-banner.zoom-animation-enabled .banner-slide {
    background-size: cover;
    transform: scale(1);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-out;
}

.nenghui-banner.zoom-animation-enabled .banner-slide.active {
    animation: bannerZoomIn <?php echo esc_attr($zoom_animation_duration); ?>s ease-out forwards;
}

@keyframes bannerZoomIn {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(<?php echo esc_attr(1 + ($zoom_animation_scale - 1) * 0.05); ?>);
    }
    100% {
        transform: scale(<?php echo esc_attr($zoom_animation_scale); ?>);
    }
}

/* 确保非活动幻灯片保持原始大小，添加平滑过渡 */
.nenghui-banner.zoom-animation-enabled .banner-slide:not(.active) {
    transform: scale(1);
    animation: none;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-out;
}

.nenghui-banner .banner-slide.active {
    opacity: 1;
    z-index: 2;
}

/* 视频背景样式 */
.nenghui-banner .banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none; /* 禁用用户交互 */
}

/* 视频幻灯片特殊处理 */
.nenghui-banner .banner-slide:has(.banner-video) {
    background-image: none !important;
}

/* 视频缩放动画效果 */
.nenghui-banner.zoom-animation-enabled .banner-slide .banner-video {
    transform: scale(1);
    transition: transform 0.6s ease-out;
}

.nenghui-banner.zoom-animation-enabled .banner-slide.active .banner-video {
    animation: videoZoomIn <?php echo esc_attr($zoom_animation_duration); ?>s ease-out forwards;
}

@keyframes videoZoomIn {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(<?php echo esc_attr(1 + ($zoom_animation_scale - 1) * 0.05); ?>);
    }
    100% {
        transform: scale(<?php echo esc_attr($zoom_animation_scale); ?>);
    }
}

/* 确保非活动视频保持原始大小 */
.nenghui-banner.zoom-animation-enabled .banner-slide:not(.active) .banner-video {
    transform: scale(1);
    animation: none;
    transition: transform 0.6s ease-out;
}

.nenghui-banner .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.nenghui-banner .banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 80%;
    transform: translate(-50%, -50%);
    z-index: 4;
    color: white;
}

/* 文字内容动画效果 */
.nenghui-banner .banner-text-content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.nenghui-banner .banner-btn {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.3s;
}

.nenghui-banner .banner-slide.active .banner-text-content {
    opacity: 1;
    transform: translateY(0);
}

.nenghui-banner .banner-slide.active .banner-btn {
    opacity: 1;
    transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nenghui-banner .banner-content {
        max-width: 90%;
        padding: 0 15px;
    }
    
    .nenghui-banner .banner-text-content {
        transform: translateY(20px);
    }
    
    .nenghui-banner .banner-btn {
        transform: translateY(20px);
    }
}

@media (max-width: 480px) {
    .nenghui-banner .banner-content {
        max-width: 95%;
        padding: 0 10px;
    }
    
    .nenghui-banner .banner-text-content {
        transform: translateY(15px);
    }
    
    .nenghui-banner .banner-btn {
        transform: translateY(15px);
    }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
    .nenghui-banner .banner-text-content,
    .nenghui-banner .banner-btn {
        transition: none;
        opacity: 1;
        transform: none;
    }
    
    /* 禁用背景图片缩放动画 */
    .nenghui-banner.zoom-animation-enabled .banner-slide,
    .nenghui-banner.zoom-animation-enabled .banner-slide.active,
    .nenghui-banner.zoom-animation-enabled .banner-slide:not(.active) {
        animation: none;
        transform: scale(1) !important;
        background-size: cover;
    }
    
    /* 禁用视频缩放动画 */
    .nenghui-banner.zoom-animation-enabled .banner-slide .banner-video,
    .nenghui-banner.zoom-animation-enabled .banner-slide.active .banner-video,
    .nenghui-banner.zoom-animation-enabled .banner-slide:not(.active) .banner-video {
        animation: none !important;
        transform: scale(1) !important;
    }
}

/* 移动设备视频优化 */
@media (max-width: 768px) {
    .nenghui-banner .banner-video {
        /* 确保视频在移动设备上正确显示 */
        object-fit: cover;
        object-position: center;
    }
    
    /* 移动设备上禁用视频缩放动画以提升性能 */
    .nenghui-banner.zoom-animation-enabled .banner-slide .banner-video,
    .nenghui-banner.zoom-animation-enabled .banner-slide.active .banner-video {
        animation: none;
        transform: scale(1) !important;
    }
}

.nenghui-banner .banner-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.nenghui-banner .pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease;
}

.nenghui-banner .pagination-dot.active {
    background: rgba(255, 255, 255, 1);
}

.nenghui-banner .banner-button-prev,
.nenghui-banner .banner-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgb(46 182 170 / 40%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 5;
    user-select: none;
}

.nenghui-banner .banner-button-prev:hover,
.nenghui-banner .banner-button-next:hover {
    background: rgb(46 182 170 / 70%);
    border: 1px solid #eee;
}

.nenghui-banner .banner-button-prev {
    left: 20px;
}

.nenghui-banner .banner-button-next {
    right: 20px;
}

.nenghui-banner .video-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
}

.nenghui-banner .video-loading .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    margin-top: -18px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-top-color: #2eb6aa;
    border-radius: 50%;
    animation: bannerSpin 0.8s linear infinite;
}

@keyframes bannerSpin {
    to { transform: rotate(360deg); }
}
</style>

<script>
(function() {
    /**
     * 原生JavaScript Banner轮播功能
     * 替代Swiper库，防止多个轮播初始化造成混乱
     */
    function initNativeBanner() {
        const bannerId = '<?php echo esc_js($banner_id); ?>';
        const bannerElement = document.getElementById(bannerId);
        
        if (!bannerElement) {
            return;
        }
        
        // 检查是否已经初始化过
        if (bannerElement.bannerInstance) {
            bannerElement.bannerInstance.destroy();
        }
        
        const slides = bannerElement.querySelectorAll('.banner-slide');
        const dots = bannerElement.querySelectorAll('.pagination-dot');
        const prevBtn = bannerElement.querySelector('.banner-button-prev');
        const nextBtn = bannerElement.querySelector('.banner-button-next');
        
        if (slides.length <= 1) {
            return;
        }
        
        // 查找当前活动的幻灯片索引
        let currentSlide = 0;
        slides.forEach((slide, index) => {
            if (slide.classList.contains('active')) {
                currentSlide = index;
            }
        });
        
        let autoplayTimer = null;
        const autoplay = bannerElement.getAttribute('data-autoplay') === 'true';
        const delay = parseInt(bannerElement.getAttribute('data-delay')) || 5000;
        
        
        function releaseSlideVideo(slide) {
            const video = slide.querySelector('.banner-video');
            if (!video) return;
            try { video.pause(); } catch (e) {}
            const source = video.querySelector('source');
            if (source) source.src = '';
            video.removeAttribute('src');
            try { video.load(); } catch (e) {}
            if (video.parentNode) video.parentNode.removeChild(video);
            const fallbackImg = slide.querySelector('.banner-video-fallback');
            if (fallbackImg) fallbackImg.style.display = 'block';
            const loadingEl = slide.querySelector('.video-loading');
            if (loadingEl) loadingEl.style.display = 'none';
        }

        /**
         * 获取或创建视频元素，避免重复创建
         */
        function getOrCreateVideoElement(slide, src, isMobile) {
            let video = slide.querySelector('.banner-video');
            if (video) return video;
            
            if (!src) return null;

            const fallbackImg = slide.querySelector('.banner-video-fallback');
            const loadingEl = slide.querySelector('.video-loading');

            video = document.createElement('video');
            video.className = 'banner-video';
            video.muted = true;
            video.loop = true;
            video.playsInline = true;
            video.preload = isMobile ? 'metadata' : 'auto';
            
            const source = document.createElement('source');
            source.src = src;
            source.type = 'video/mp4';
            video.appendChild(source);
            
            if (fallbackImg && fallbackImg.parentNode) {
                slide.insertBefore(video, fallbackImg);
            } else {
                slide.appendChild(video);
            }

            // 添加事件监听
            video.addEventListener('error', function() {
                if (fallbackImg) fallbackImg.style.display = 'block';
                video.style.display = 'none';
                if (loadingEl) loadingEl.style.display = 'none';
            });
            
            video.addEventListener('loadeddata', function() {
                if (slide.classList.contains('active') && loadingEl) loadingEl.style.display = 'none';
                if (fallbackImg) fallbackImg.style.display = 'none';
            });
            
            video.addEventListener('ended', function() {
                video.currentTime = 0;
                video.play().catch(function(){});
            });

            return video;
        }

        /**
         * 控制视频播放
         */
        function controlVideos(activeIndex) {
            const isMobile = window.innerWidth <= 768;
            const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
            const saveData = !!(conn && conn.saveData);
            const effectiveType = (conn && conn.effectiveType) || '';
            const preloadNeighbors = !isMobile && !saveData && effectiveType !== '2g' && effectiveType !== 'slow-2g';
            const prevIndex = (activeIndex - 1 + slides.length) % slides.length;
            const nextIndex = (activeIndex + 1) % slides.length;
            
            slides.forEach((slide, index) => {
                const hasVideo = slide.getAttribute('data-has-video') === 'true';
                if (!hasVideo) return;
                
                const src = slide.getAttribute('data-video-src');
                const loadingEl = slide.querySelector('.video-loading');
                const fallbackImg = slide.querySelector('.banner-video-fallback');

                if (index === activeIndex) {
                    const video = getOrCreateVideoElement(slide, src, isMobile);
                    
                    if (video) {
                        if (loadingEl) loadingEl.style.display = 'block';
                        const p = video.play();
                        if (p && typeof p.then === 'function') {
                            p.then(function(){ 
                                if (loadingEl) loadingEl.style.display = 'none'; 
                                if (fallbackImg) fallbackImg.style.display = 'none'; 
                            })
                             .catch(function(){ 
                                 if (fallbackImg) fallbackImg.style.display = 'block'; 
                                 video.style.display = 'none'; 
                                 if (loadingEl) loadingEl.style.display = 'none'; 
                             });
                        }
                    }
                } else if (preloadNeighbors && (index === prevIndex || index === nextIndex)) {
                    const video = getOrCreateVideoElement(slide, src, isMobile);
                    if (video) {
                        // 预加载但不播放
                        if (video.preload === 'metadata' && !isMobile) {
                             video.preload = 'auto';
                        }
                        try { video.load(); } catch(e) {}
                    }
                    if (loadingEl) loadingEl.style.display = 'none';
                } else {
                    releaseSlideVideo(slide);
                }
            });
        }
        
        /**
         * 初始化视频事件监听
         */
        function initVideoEvents() {}
        
        /**
         * 重新启动缩放动画
         */
        function restartZoomAnimation(slide) {
            const zoomEnabled = bannerElement.getAttribute('data-zoom-animation') === 'true';
            if (zoomEnabled && bannerElement.classList.contains('zoom-animation-enabled')) {
                // 处理视频缩放动画
                const video = slide.querySelector('.banner-video');
                if (video) {
                    video.style.transform = 'scale(1)';
                    video.style.animation = 'none';
                    
                    // 强制重绘
                    video.offsetHeight;
                    
                    // 延迟启动动画
                    setTimeout(() => {
                        video.style.animation = '';
                    }, 100);
                } else {
                    // 处理图片缩放动画
                    slide.style.transform = 'scale(1)';
                    slide.style.animation = 'none';
                    
                    // 强制重绘
                    slide.offsetHeight;
                    
                    // 延迟启动动画
                    setTimeout(() => {
                        slide.style.animation = '';
                    }, 100);
                }
            }
        }
        
        /**
         * 切换到指定幻灯片
         */
        function goToSlide(index) {
            // 验证索引有效性
            if (index < 0 || index >= slides.length) {
                return;
            }
            
            // 移除所有活动状态
            slides.forEach((slide, slideIndex) => {
                slide.classList.remove('active');
                // 重置文字动画状态
                const textContent = slide.querySelector('.banner-text-content');
                const btnContent = slide.querySelector('.banner-btn');
                if (textContent) {
                    textContent.style.opacity = '';
                    textContent.style.transform = '';
                }
                if (btnContent) {
                    btnContent.style.opacity = '';
                    btnContent.style.transform = '';
                }
            });
            dots.forEach(dot => dot.classList.remove('active'));
            
            // 设置新的活动状态
            slides[index].classList.add('active');
            if (dots[index]) {
                dots[index].classList.add('active');
            }
            
            // 控制视频播放
            controlVideos(index);
            
            // 重新启动当前幻灯片的缩放动画
            restartZoomAnimation(slides[index]);
            
            // 更新当前幻灯片索引
            currentSlide = index;
        }
        
        /**
         * 下一张幻灯片
         */
        function nextSlide() {
            if (slides.length <= 1) return;
            const next = (currentSlide + 1) % slides.length;
            goToSlide(next);
        }
        
        /**
         * 上一张幻灯片
         */
        function prevSlide() {
            if (slides.length <= 1) return;
            const prev = (currentSlide - 1 + slides.length) % slides.length;
            goToSlide(prev);
        }
        
        /**
         * 开始自动播放
         */
        function startAutoplay() {
            if (autoplay && slides.length > 1) {
                // 清除可能存在的定时器
                if (autoplayTimer) {
                    clearInterval(autoplayTimer);
                }
                autoplayTimer = setInterval(nextSlide, delay);
            }
        }
        
        /**
         * 停止自动播放
         */
        function stopAutoplay() {
            if (autoplayTimer) {
                clearInterval(autoplayTimer);
                autoplayTimer = null;
            }
        }
        
        /**
         * 重启自动播放
         */
        function restartAutoplay() {
            stopAutoplay();
            startAutoplay();
        }
        
        // 绑定分页点击事件
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                goToSlide(index);
                restartAutoplay();
            });
        });
        
        // 绑定导航按钮事件
        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                prevSlide();
                restartAutoplay();
            });
        }
        
        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                nextSlide();
                restartAutoplay();
            });
        }
        
        // 鼠标悬停时暂停自动播放
        bannerElement.addEventListener('mouseenter', stopAutoplay);
        bannerElement.addEventListener('mouseleave', startAutoplay);
        
        // 键盘导航支持
        document.addEventListener('keydown', (e) => {
            if (bannerElement.matches(':hover')) {
                if (e.key === 'ArrowLeft') {
                    prevSlide();
                    restartAutoplay();
                } else if (e.key === 'ArrowRight') {
                    nextSlide();
                    restartAutoplay();
                }
            }
        });
        
        // 触摸滑动支持
        let touchStartX = 0;
        let touchEndX = 0;
        
        bannerElement.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });
        
        bannerElement.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            const diff = touchStartX - touchEndX;
            
            if (Math.abs(diff) > 50) { // 最小滑动距离
                if (diff > 0) {
                    nextSlide();
                } else {
                    prevSlide();
                }
                restartAutoplay();
            }
        });
        
        // 销毁方法
        const destroy = () => {
            stopAutoplay();
            slides.forEach(slide => releaseSlideVideo(slide));
            dots.forEach(dot => {
                dot.removeEventListener('click', () => {});
            });
            if (prevBtn) prevBtn.removeEventListener('click', () => {});
            if (nextBtn) nextBtn.removeEventListener('click', () => {});
            bannerElement.removeEventListener('mouseenter', stopAutoplay);
            bannerElement.removeEventListener('mouseleave', startAutoplay);
            bannerElement.bannerInstance = null;
        };
        
        // 存储实例到元素上
        bannerElement.bannerInstance = {
            goToSlide,
            nextSlide,
            prevSlide,
            startAutoplay,
            stopAutoplay,
            destroy
        };
        
        // 初始化视频事件监听
        initVideoEvents();
        
        // 确保当前幻灯片状态正确
        if (slides.length > 0) {
            // 如果没有活动幻灯片，设置第一张为活动
            const hasActiveSlide = Array.from(slides).some(slide => slide.classList.contains('active'));
            if (!hasActiveSlide) {
                goToSlide(0);
            } else {
                // 初始化视频播放状态
                controlVideos(currentSlide);
            }
        }
        
        // 开始自动播放
        startAutoplay();
        
    }
    
    // 多种初始化方式确保兼容性
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initNativeBanner);
    } else {
        initNativeBanner();
    }
    
    // 备用初始化
    window.addEventListener('load', function() {
        setTimeout(initNativeBanner, 100);
    });
})();
</script>