查看“︁2026年冬季新番/PV导视（生肉版）”︁的源代码

__TOC__

= 2026年冬季新番 · PV 导视（生肉版） =

以下为 2026 年冬季部分番剧的 PV 列表。  
点击左侧任意卡片，可在右侧播放器内观看对应 PV。

== PV 播放区 ==

<div class="pv-layout">

  <!-- 左侧：PV 卡片列表 -->
  <div class="pv-left">

    <!-- Fate/strange Fake -->
    <div class="pv-item" data-yt="k1G8EvZg_BY" onclick="switchPV(this)">
      <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
      <div class="pv-title">Fate/strange Fake ｜ 第1弾PV</div>
    </div>

    <!-- 葬送的芙莉莲 第2期 -->
    <div class="pv-item" data-yt="MwP4gqRys4c" onclick="switchPV(this)">
      <img src="https://img.youtube.com/vi/MwP4gqRys4c/hqdefault.jpg" />
      <div class="pv-title">葬送的芙莉莲 第2期 ｜ PV第2弾</div>
    </div>

    <!-- 咒术回战 死灭回游 前篇 -->
    <div class="pv-item" data-yt="JDltDG8n7Do" onclick="switchPV(this)">
      <img src="https://img.youtube.com/vi/JDltDG8n7Do/hqdefault.jpg" />
      <div class="pv-title">咒术回战 死灭回游 前篇 ｜ 第1弾PV</div>
    </div>

    <!-- 地狱乐 第2期 -->
    <div class="pv-item" data-yt="5QUyhQsXXtw" onclick="switchPV(this)">
      <img src="https://img.youtube.com/vi/5QUyhQsXXtw/hqdefault.jpg" />
      <div class="pv-title">地狱乐 第2期 ｜ 第1弾PV</div>
    </div>

  </div>

  <!-- 右侧：唯一播放器 -->
  <div class="pv-right">
      <div id="pv-player-box" class="pv-player-box">
        <!-- 默认先放 Fate/strange Fake -->
        <iframe
          id="pv-main-iframe"
          src="https://www.youtube.com/embed/k1G8EvZg_BY?rel=0&modestbranding=1"
          title="PV 播放器"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          referrerpolicy="strict-origin-when-cross-origin"
          allowfullscreen>
        </iframe>
      </div>
  </div>

</div>


== 页面样式（本页专用 CSS） ==

<style>
.pv-layout {
    display: flex;
    gap: 32px;
    margin: 20px 0 40px;
    align-items: flex-start;
}

/* 左侧列表 */
.pv-left {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 左侧每个 PV 卡片 */
.pv-item {
    cursor: pointer;
    background: #ffffff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: .18s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pv-item img {
    width: 100%;
    border-radius: 10px;
    display: block;
}

.pv-item .pv-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2933;
}

/* 当前选中的 PV 高亮 */
.pv-item.active {
    box-shadow: 0 0 0 2px #3b82f6, 0 8px 20px rgba(37,99,235,0.25);
    transform: translateY(-2px);
}

/* 右侧播放器区域 */
.pv-right {
    flex: 1;
    min-width: 520px;
}

.pv-player-box {
    width: 100%;
    max-width: 960px;
}

.pv-player-box iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

/* 手机端适配 */
@media (max-width: 900px) {
    .pv-layout {
        flex-direction: column;
    }
    .pv-left {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .pv-item {
        width: calc(50% - 8px);
    }
    .pv-right {
        min-width: auto;
    }
}
</style>


== 页面脚本（本页专用 JS） ==

<script>
/**
 * 切换右侧播放器的视频
 * el: 被点击的 .pv-item 元素
 */
function switchPV(el) {
    try {
        var videoId = el.getAttribute('data-yt');
        if (!videoId) return;

        // 更新 iframe src
        var iframe = document.getElementById('pv-main-iframe');
        if (!iframe) return;

        var src = 'https://www.youtube.com/embed/' + videoId +
                  '?autoplay=1&rel=0&modestbranding=1';
        iframe.src = src;

        // 高亮当前卡片
        var items = document.querySelectorAll('.pv-item');
        items.forEach(function(item) {
            item.classList.remove('active');
        });
        el.classList.add('active');

        // 滚动到播放器区域（可选）
        document.querySelector('.pv-right').scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    } catch (e) {
        console && console.error && console.error('switchPV error:', e);
    }
}

// 页面加载后，给第一个 pv-item 加上 active 高亮
document.addEventListener('DOMContentLoaded', function() {
    var first = document.querySelector('.pv-item');
    if (first) {
        first.classList.add('active');
    }
});
</script>