|
|
| （未显示同一用户的3个中间版本） |
| 第1行： |
第1行： |
| __TOC__
| | <!-- ============================= |
| | 🎬 PV导视 · TV / 剧场版切换区块 |
| | ============================= --> |
|
| |
|
| = 2026年冬季新番 · PV 导视（生肉版） = | | <div style="border:1px solid #d9e6f2; background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%); padding:20px 22px; border-radius:12px; margin-bottom:25px; box-shadow:0 2px 6px rgba(0,0,0,0.06);"> |
|
| |
|
| 以下为 2026 年冬季部分番剧的 PV 列表。
| | <div style="font-size:20px; font-weight:bold; margin-bottom:12px;"> |
| 点击左侧任意卡片，可在右侧播放器内观看对应 PV。
| | 🎥 2026年动画 PV 导视 |
| | | </div> |
| == 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 style=" display:flex; gap:20px; flex- wrap:wrap;"> |
| <div class=" pv- item" data-yt="JDltDG8n7Do" onclick="switchPV(this)"> | | <div style="flex:1; min-width:180px;"> |
| <img src="https://img.youtube.com/vi/JDltDG8n7Do/hqdefault.jpg" />
| | [[2026年冬季新番/PV导视（生肉版）|<div style=" background:#e6f3ff; border:1px solid #8ac4f9; padding:12px 16px; border-radius:10px; text- align:center; font-weight:bold; color:#1a73e8; transition:.2s;"> 📺 TV动画 PV</div> ]] |
| <div class="pv-title">咒术回战 死灭回游 前篇 ｜ 第1弾PV</div> | |
| </div> | | </div> |
| | | <div style="flex:1; min-width:180px;"> |
| <!-- 地狱乐 第2期 -->
| | [[2026年剧场版动画/ PV导视（生肉版）|<div style=" background:#fcefe8; border:1px solid #f4aa8b; padding:12px 16px; border-radius:10px; text- align:center; font-weight:bold; color:#e86c3a; transition:.2s;"> 🎬 剧场版 PV</div> ]] |
| <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>
| |
|
| |
| <!-- 右侧：唯一播放器 -->
| |
| <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> |
|
| |
|
| </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>
| |
