跳转到内容

2026年冬季新番/PV导视（生肉版）：修订间差异

来自次元企鹅情报局百科
←上一编辑下一编辑→
可视化wikitext
Admin​（留言 | 贡献）
行政员、​界面管理员、​管理员
414次编辑
无编辑摘要
Admin​（留言 | 贡献）
行政员、​界面管理员、​管理员
414次编辑
无编辑摘要
第1行： 第1行：
__TOC__
= PV 测试（单视频） =


= 2026年冬季新番 · PV 导视（生肉版） =
我们先测试一个视频，确认 JS 能在页面内执行。


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


<div class="pv-layout">
<div class="pv-layout">


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


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


   <!-- 右侧：唯一播放器 -->
   <!-- 右侧播放器 -->
   <div class="pv-right">
   <div class="pv-right">
       <div id="pv-player-box" class="pv-player-box">
       <div class="pv-player-box">
        <!-- 默认先放 Fate/strange Fake -->
         <iframe
         <iframe
           id="pv-main-iframe"
           id="pv-main-iframe"
第56行： 第33行：


</div>
</div>
== 页面样式（本页专用 CSS） ==


<style>
<style>
第65行： 第39行：
     gap: 32px;
     gap: 32px;
     margin: 20px 0 40px;
     margin: 20px 0 40px;
    align-items: flex-start;
}
}
/* 左侧列表 */
.pv-left {
.pv-left {
     width: 340px;
     width: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
}
/* 左侧每个 PV 卡片 */
.pv-item {
.pv-item {
     cursor: pointer;
     cursor: pointer;
     background: #ffffff;
     background: #fff;
    border-radius: 14px;
     padding: 8px;
     padding: 8px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 12px;
     transition: .18s ease;
     box-shadow: 0 4px 12px rgba(0,0,0,.1);
    display: flex;
     transition: .2s;
    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-item img { width: 100%; border-radius: 10px; }
/* 当前选中的 PV 高亮 */
.pv-title { font-size: 14px; font-weight: bold; margin-top: 6px; }
.pv-item.active {
.pv-item.active {
     box-shadow: 0 0 0 2px #3b82f6, 0 8px 20px rgba(37,99,235,0.25);
     box-shadow: 0 0 0 2px #3b82f6;
    transform: translateY(-2px);
}
}
 
.pv-right { flex: 1; min-width: 400px; }
/* 右侧播放器区域 */
.pv-right {
    flex: 1;
    min-width: 520px;
}
 
.pv-player-box {
    width: 100%;
    max-width: 960px;
}
 
.pv-player-box iframe {
.pv-player-box iframe {
     width: 100%;
     width: 100%;
     aspect-ratio: 16 / 9;
     aspect-ratio: 16/9;
     border-radius: 12px;
     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>
</style>
== 页面脚本（本页专用 JS） ==


<script>
<script>
/**
* 切换右侧播放器的视频
* el: 被点击的 .pv-item 元素
*/
function switchPV(el) {
function switchPV(el) {
     try {
     var videoId = el.getAttribute('data-yt');
        var videoId = el.getAttribute('data-yt');
    var iframe = document.getElementById('pv-main-iframe');
        if (!videoId) return;
    iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1';
 
        // 更新 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({
    document.querySelectorAll('.pv-item').forEach(function(n){
            behavior: 'smooth',
        n.classList.remove('active');
            block: 'start'
     });
        });
    el.classList.add('active');
     } 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>
</script>

2025年11月22日 (六) 12:42的版本

PV 测试（单视频）

我们先测试一个视频，确认 JS 能在页面内执行。

PV 区

     <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
Fate/strange Fake ｜ 第1弾PV（测试用）
       <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>

<style> .pv-layout { 

   display: flex;
   gap: 32px;
   margin: 20px 0 40px;

} .pv-left { 

   width: 300px;

} .pv-item { 

   cursor: pointer;
   background: #fff;
   padding: 8px;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0,0,0,.1);
   transition: .2s;

} .pv-item img { width: 100%; border-radius: 10px; } .pv-title { font-size: 14px; font-weight: bold; margin-top: 6px; } .pv-item.active { 

   box-shadow: 0 0 0 2px #3b82f6;

} .pv-right { flex: 1; min-width: 400px; } .pv-player-box iframe { 

   width: 100%;
   aspect-ratio: 16/9;
   border-radius: 12px;

} </style>

<script> function switchPV(el) { 

   var videoId = el.getAttribute('data-yt');
   var iframe = document.getElementById('pv-main-iframe');
   iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1';

   // 高亮
   document.querySelectorAll('.pv-item').forEach(function(n){
       n.classList.remove('active');
   });
   el.classList.add('active');

} </script>

检索自“https://mediawiki.acgpenguin.com/index.php?title=2026年冬季新番/PV导视（生肉版）&oldid=350”