2026年冬季新番/PV导视(生肉版):修订间差异
外观
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
__TOC__ | __TOC__ | ||
= 2026年冬季新番 · PV | = 2026年冬季新番 · 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( | <!-- 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( | <!-- 葬送的芙莉莲 第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( | <!-- 咒术回战 死灭回游 前篇 --> | ||
<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( | <!-- 地狱乐 第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"> | ||
<!-- 默认先放 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) == | ||
<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: | gap: 16px; | ||
} | } | ||
/* 左侧每个 PV 卡片 */ | |||
.pv-item { | .pv-item { | ||
cursor: pointer; | cursor: pointer; | ||
background: # | background: #ffffff; | ||
border-radius: 14px; | border-radius: 14px; | ||
padding: | padding: 8px; | ||
box-shadow: 0 4px | box-shadow: 0 4px 12px rgba(0,0,0,0.08); | ||
transition: . | transition: .18s ease; | ||
display: flex; | |||
flex-direction: column; | |||
gap: 6px; | |||
} | } | ||
.pv-item img { | .pv-item img { | ||
width: 100%; | width: 100%; | ||
border-radius: 10px; | border-radius: 10px; | ||
display: block; | |||
} | } | ||
.pv-title { | |||
.pv-item .pv-title { | |||
font- | 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 { | .pv-right { | ||
flex: 1; | flex: 1; | ||
min-width: | 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) == | ||
<script> | <script> | ||
function switchPV( | /** | ||
var | * 切换右侧播放器的视频 | ||
* 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> | </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>