查看“Widget:HomeSwiper”的源代码

<includeonly>
<script>
    function initTabCarousel() {
        const pauseOnHover = `<!--{$pauseOnHover}-->`;
        const delay = parseInt(`<!--{$delay}-->`) || 3000;
        
        console.log(`初始化轮播：pauseOnHover=${pauseOnHover}, delay=${delay}ms`);

        try {
            const swiperTabs = document.querySelectorAll('.swiperTabs');
            
            if (!swiperTabs.length) {
                console.log('未找到轮播标签页');
                return;
            }

            swiperTabs.forEach(container => {
                const tabBtns = container.querySelectorAll('.tab-btn');
                const tabPanes = container.querySelectorAll('.tab-pane');
                
                if (!tabBtns.length || !tabPanes.length) {
                    console.error('标签页结构不完整');
                    return;
                }

                let currentIndex = 0;
                let intervalId = null;
                let isPaused = false;
                
                function switchTab() {
                    try {
                        tabBtns.forEach(btn => btn.classList.remove('active'));
                        tabPanes.forEach((pane,i) => {
                          pane.classList.remove('hidden')
                          pane.classList.remove('active')
                          if(i === currentIndex){ pane.classList.add('active') }
                          else{ pane.classList.add('hidden') }
                        });
                        
                        tabBtns[currentIndex].classList.add('active');
                        //tabPanes[currentIndex].classList.add('active');
                        
                        currentIndex = (currentIndex + 1) % tabBtns.length;
                    } catch (err) {
                        console.error('切换失败');
                    }
                }

                function startCarousel() {
                    if (!isPaused) {
                        intervalId = setInterval(switchTab, delay);
                    }
                }

                function stopCarousel() {
                    if (intervalId) {
                        clearInterval(intervalId);
                        intervalId = null;
                    }
                }

                // 判断是否禁用悬停暂停功能
                if (pauseOnHover === '0') {
                    console.log('禁用悬停暂停');
                } else {
                    container.addEventListener('mouseenter', () => {
                        isPaused = true;
                        stopCarousel();
                    });

                    container.addEventListener('mouseleave', () => {
                        isPaused = false;
                        startCarousel();
                    });
                }

                // 初始启动轮播
                startCarousel();
                
                // 存储清理函数
                container.cleanup = () => {
                    stopCarousel();
                    isPaused = true;
                };
              
                // 点击tab后切换currentIndex
                tabBtns.forEach((tab,index)=>{
                    tab.addEventListener("click", () => {
                        currentIndex = index;
                    })
                })
            });

        } catch (err) {
            console.error('轮播初始化失败');
        }
    }

    // 确保DOM加载完成后再初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabCarousel);
    } else {
        initTabCarousel();
    }
</script>
</includeonly><noinclude>
<nowiki>{{#widget:HomeSwiper}}</nowiki><br>
针对Tabs的轮播功能，支持配置参数：<br>
*targetId：指定轮播对象id
*pauseOnHover：默认为启用，可选值：0为不启用，鼠标悬停在内容区域时，自动暂停轮播
*delay：轮播间隔
</noinclude>