跳转到内容

2026年冬季新番/PV导视(生肉版):修订间差异

来自次元企鹅情报局百科
Admin留言 | 贡献
无编辑摘要
Admin留言 | 贡献
无编辑摘要
第1行: 第1行:
__TOC__
__TOC__


= 2026年冬季新番 · PV 导视(方案:左侧卡片 + 右侧播放器) =
= 2026年冬季新番 · PV 导视(生肉版) =


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


== PV 列表 ==
== PV 播放区 ==


<div class="pv-layout">
<div class="pv-layout">
第12行: 第13行:
   <div class="pv-left">
   <div class="pv-left">


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


     <div class="pv-item" onclick="switchPV('MwP4gqRys4c')">
    <!-- 葬送的芙莉莲 第2期 -->
       <img src="https://img.youtube.com/vi/MwP4gqRys4c/hqdefault.jpg">
     <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 class="pv-title">葬送的芙莉莲 第2期 | PV第2弾</div>
     </div>
     </div>


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


     <div class="pv-item" onclick="switchPV('5QUyhQsXXtw')">
    <!-- 地狱乐 第2期 -->
       <img src="https://img.youtube.com/vi/5QUyhQsXXtw/hqdefault.jpg">
     <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 class="pv-title">地狱乐 第2期 | 第1弾PV</div>
     </div>
     </div>
第34行: 第39行:
   </div>
   </div>


   <!-- 右侧:唯一的主播放器 -->
   <!-- 右侧:唯一播放器 -->
   <div class="pv-right">
   <div class="pv-right">
       <div id="pv-player-box">
       <div id="pv-player-box" class="pv-player-box">
         {{#ev:youtube|k1G8EvZg_BY|width=960|alignment=center}}
        <!-- 默认先放 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>
第44行: 第58行:




== 页面样式(CSS) ==
== 页面样式(本页专用 CSS) ==


<style>
<style>
第50行: 第64行:
     display: flex;
     display: flex;
     gap: 32px;
     gap: 32px;
     margin: 20px 0;
     margin: 20px 0 40px;
    align-items: flex-start;
}
}
/* 左侧列表 */
.pv-left {
.pv-left {
     width: 340px;
     width: 340px;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: 20px;
     gap: 16px;
}
}
/* 左侧每个 PV 卡片 */
.pv-item {
.pv-item {
     cursor: pointer;
     cursor: pointer;
     background: #fff;
     background: #ffffff;
     border-radius: 14px;
     border-radius: 14px;
     padding: 10px;
     padding: 8px;
     box-shadow: 0 4px 16px rgba(0,0,0,0.1);
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     transition: .2s;
     transition: .18s ease;
}
    display: flex;
.pv-item:hover {
     flex-direction: column;
     transform: translateY(-4px);
     gap: 6px;
     box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
}
.pv-item img {
.pv-item img {
     width: 100%;
     width: 100%;
     border-radius: 10px;
     border-radius: 10px;
    display: block;
}
}
.pv-title {
 
     margin-top: 6px;
.pv-item .pv-title {
     font-size: 15px;
     font-size: 14px;
     font-weight: bold;
     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 {
.pv-right {
     flex: 1;
     flex: 1;
     min-width: 600px;
     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>
</style>




== 页面脚本(JS) ==
== 页面脚本(本页专用 JS) ==


<script>
<script>
function switchPV(videoId) {
/**
     var box = document.getElementById("pv-player-box");
* 切换右侧播放器的视频
    box.innerHTML =
* el: 被点击的 .pv-item 元素
      '{{#ev:youtube|' + videoId + '|width=960|alignment=center}}';
*/
function switchPV(el) {
     try {
        var videoId = el.getAttribute('data-yt');
        if (!videoId) return;


    // 自动滚动到播放器
        // 更新 iframe src
    document.querySelector(".pv-right").scrollIntoView({
        var iframe = document.getElementById('pv-main-iframe');
        behavior: "smooth",
        if (!iframe) return;
        block: "start"
 
     });
        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>
</script>

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

2026年冬季新番 · PV 导视(生肉版)

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

PV 播放区

     <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
Fate/strange Fake | 第1弾PV
     <img src="https://img.youtube.com/vi/MwP4gqRys4c/hqdefault.jpg" />
葬送的芙莉莲 第2期 | PV第2弾
     <img src="https://img.youtube.com/vi/JDltDG8n7Do/hqdefault.jpg" />
咒术回战 死灭回游 前篇 | 第1弾PV
     <img src="https://img.youtube.com/vi/5QUyhQsXXtw/hqdefault.jpg" />
地狱乐 第2期 | 第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>


页面样式(本页专用 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>