HTML5 在线漫画阅读器 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,user-scalable=yes">
<title>西行纪３：大猿魂 - 在线漫画阅读器</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0d0f17;color:#f1f5f9;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
header{position:sticky;top:0;z-index:50;background:rgba(13,15,23,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.09);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.badge{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px}
.title{font-size:16px;font-weight:700;color:#fff}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
button{background:rgba(255,255,255,0.08);color:#e2e8f0;border:1px solid rgba(255,255,255,0.14);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:.18s}
button:hover,button.active{background:#ec4899;color:#fff;border-color:#ec4899}
.hero{max-width:920px;margin:16px auto;padding:18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;display:flex;gap:18px;align-items:flex-start}
.hero img{width:120px;height:160px;object-fit:cover;border-radius:10px;flex-shrink:0;box-shadow:0 8px 24px rgba(0,0,0,0.45)}
.hero-meta h1{font-size:20px;margin-bottom:6px}
.hero-meta .sub{font-size:13px;color:#94a3b8;margin-bottom:8px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag{background:rgba(236,72,153,0.16);color:#f472b6;padding:2px 8px;border-radius:6px;font-size:11px}
.desc{font-size:13px;line-height:1.6;color:#cbd5e1}
.reader-wrap{max-width:860px;width:100%;margin:0 auto 40px;padding:0 8px;flex:1}
.scroll-mode .page-card{margin-bottom:10px;background:#161925;border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.4)}
.scroll-mode .page-card img{width:100%;height:auto;display:block}
.page-footer{text-align:center;font-size:11px;color:#64748b;padding:4px 0}
.flip-controls{display:none;justify-content:center;align-items:center;gap:14px;margin:14px 0}
.flip-mode .flip-controls{display:flex}
.drawer{display:none;max-width:920px;margin:0 auto 20px;padding:16px;background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.1)}
.drawer.open{display:block}
.chap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:10px}
.chap-item{padding:8px 10px;background:rgba(255,255,255,0.06);border-radius:8px;font-size:12px;color:#e2e8f0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap-item:hover{background:rgba(236,72,153,0.28)}
@media(max-width:600px){.hero{flex-direction:column;align-items:center;text-align:center}.tags{justify-content:center}}
</style>
</head>
<body>
<header>
<div class="brand">
<span class="badge">BILIMANGA · 统一媒体库</span>
<span class="title" id="hdrTitle"></span>
</div>
<div class="controls">
<button id="btnScroll" class="active" onclick="setMode('scroll')">条漫下拉模式</button>
<button id="btnFlip" onclick="setMode('flip')">单页翻页模式</button>
<button onclick="toggleCatalog()">章节目录 (<span id="chapCount">0</span>)</button>
<button onclick="cycleLang()" id="btnLang">繁/簡/EN</button>
</div>
</header>
<section class="hero">
<img id="heroCover" src="" alt="cover">
<div class="hero-meta">
<h1 id="heroTitle"></h1>
<div class="sub" id="heroSub"></div>
<div class="tags" id="heroTags"></div>
<p class="desc" id="heroDesc"></p>
</div>
</section>
<section class="drawer" id="catDrawer">
<h3 style="font-size:14px;margin-bottom:6px">全卷章节目录 (点击切换预览章节)</h3>
<div class="chap-grid" id="chapGrid"></div>
</section>
<div class="reader-wrap scroll-mode" id="readerWrap">
<div class="flip-controls">
<button onclick="stepPage(-1)">◀ 上一页</button>
<span id="pageIndicator" style="font-size:13px;color:#cbd5e1">1 / 1</span>
<button onclick="stepPage(1)">下一页 ▶</button>
</div>
<div id="pagesContainer"></div>
</div>
<script>
const COMIC = {"slug": "bilimanga-1476", "mangaid": "1476", "zh_title": "西行纪３：大猿魂", "hant_title": "西行紀３：大猿魂", "en_title": "西行纪３：大猿魂 (Bilimanga #1476)", "author": "邓志辉 / 郑健和", "tags": ["东方", "神鬼", "战争", "战斗", "奇幻", "奇幻冒险", "港台漫画", "漫画"], "zh_desc": "远古时代埋藏的真相逐渐揭开，关于孙悟空力量来源的秘密也浮出水面。传说中的大猿魂再次觉醒，妖怪大道、龙神八部以及诸神之间的恩怨被彻底引爆。面对足以颠覆世界秩序的危机，众人必须作出最终抉择，而属于西行者们的传奇也将迎来新的篇章。\n\n📚 作品信息：作者 邓志辉 / 郑健和 · 评分 10 · 共收录 15 卷 / 76 话章节目录与高清彩页/条漫预览。", "hant_desc": "遠古時代埋藏的真相逐漸揭開，關於孫悟空力量來源的秘密也浮出水面。傳說中的大猿魂再次覺醒，妖怪大道、龍神八部以及諸神之間的恩怨被徹底引爆。面對足以顛覆世界秩序的危機，眾人必須作出最終抉擇，而屬於西行者們的傳奇也將迎來新的篇章。\n\n📚 作品資訊：作者 鄧志輝 / 鄭健和 · 評分 10 · 共收錄 15 卷 / 76 話章節目錄與高清彩頁/條漫預覽。", "en_desc": "Popular serialized manga '西行纪３：大猿魂' (西行紀３：大猿魂) by 邓志辉 / 郑健和. Includes 15 volumes and 76 chapters with full online vertical/page-flip web reader.", "pages": ["https://media.huangguodrama.ai/motion/comics/bilimanga-1476/page_01.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1476/page_02.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1476/page_03.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1476/page_04.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1476/page_05.jpg", "https://media.huangguodrama.ai/motion/comics/bilimanga-1476/page_06.jpg"], "volumes": [{"title_hant": "西行紀３：大猿魂 1", "title_zh": "西行纪３：大猿魂 1", "cover_id": 2680879, "first_chap_id": 122942, "cover_url": "https://i.motiezw.com/cover/1476/2680879.jpg"}, {"title_hant": "西行紀３：大猿魂 2", "title_zh": "西行纪３：大猿魂 2", "cover_id": 2681038, "first_chap_id": 122948, "cover_url": "https://i.motiezw.com/cover/1476/2681038.jpg"}, {"title_hant": "西行紀３：大猿魂 3", "title_zh": "西行纪３：大猿魂 3", "cover_id": 2681196, "first_chap_id": 122954, "cover_url": "https://i.motiezw.com/cover/1476/2681196.jpg"}, {"title_hant": "西行紀３：大猿魂 4", "title_zh": "西行纪３：大猿魂 4", "cover_id": 2681360, "first_chap_id": 122960, "cover_url": "https://i.motiezw.com/cover/1476/2681360.jpg"}, {"title_hant": "西行紀３：大猿魂 5", "title_zh": "西行纪３：大猿魂 5", "cover_id": 2681522, "first_chap_id": 122966, "cover_url": "https://i.motiezw.com/cover/1476/2681522.jpg"}, {"title_hant": "西行紀３：大猿魂 6", "title_zh": "西行纪３：大猿魂 6", "cover_id": 2681681, "first_chap_id": 122972, "cover_url": "https://i.motiezw.com/cover/1476/2681681.jpg"}, {"title_hant": "西行紀３：大猿魂 7", "title_zh": "西行纪３：大猿魂 7", "cover_id": 2681834, "first_chap_id": 122978, "cover_url": "https://i.motiezw.com/cover/1476/2681834.jpg"}, {"title_hant": "西行紀３：大猿魂 8", "title_zh": "西行纪３：大猿魂 8", "cover_id": 2681985, "first_chap_id": 122984, "cover_url": "https://i.motiezw.com/cover/1476/2681985.jpg"}, {"title_hant": "西行紀３：大猿魂 9", "title_zh": "西行纪３：大猿魂 9", "cover_id": 2682136, "first_chap_id": 122991, "cover_url": "https://i.motiezw.com/cover/1476/2682136.jpg"}, {"title_hant": "西行紀３：大猿魂 10", "title_zh": "西行纪３：大猿魂 10", "cover_id": 2682287, "first_chap_id": 122996, "cover_url": "https://i.motiezw.com/cover/1476/2682287.jpg"}, {"title_hant": "西行紀３：大猿魂 11", "title_zh": "西行纪３：大猿魂 11", "cover_id": 2682440, "first_chap_id": 123002, "cover_url": "https://i.motiezw.com/cover/1476/2682440.jpg"}, {"title_hant": "西行紀３：大猿魂 12", "title_zh": "西行纪３：大猿魂 12", "cover_id": 2682595, "first_chap_id": 123008, "cover_url": "https://i.motiezw.com/cover/1476/2682595.jpg"}], "chapters": [{"cid": "122942", "title": "01 妖怪道·人間世", "title_zh": "01 妖怪道·人间世"}, {"cid": "122943", "title": "02 群魔亂舞", "title_zh": "02 群魔乱舞"}, {"cid": "122944", "title": "03 炎", "title_zh": "03 炎"}, {"cid": "122945", "title": "04 一念地獄", "title_zh": "04 一念地狱"}, {"cid": "122946", "title": "05 天道無Q", "title_zh": "05 天道无Q"}, {"cid": "122948", "title": "06 奇猿閃逝", "title_zh": "06 奇猿闪逝"}, {"cid": "122949", "title": "07 大猿魂橫空出世!!!", "title_zh": "07 大猿魂横空出世!!!"}, {"cid": "122950", "title": "08 赤尻馬猴現身!!", "title_zh": "08 赤尻马猴现身!!"}, {"cid": "122951", "title": "09 金剛不壞!!!", "title_zh": "09 金刚不坏!!!"}, {"cid": "122952", "title": "10 死亡獻祭", "title_zh": "10 死亡献祭"}, {"cid": "122954", "title": "11 行騙奇才", "title_zh": "11 行骗奇才"}, {"cid": "122955", "title": "12 大猿魂", "title_zh": "12 大猿魂"}, {"cid": "122956", "title": "13 十方風雷棍", "title_zh": "13 十方风雷棍"}, {"cid": "122957", "title": "14 為了世上的猴子們!!!", "title_zh": "14 为了世上的猴子们!!!"}, {"cid": "122958", "title": "15 吶喊", "title_zh": "15 呐喊"}, {"cid": "122960", "title": "16 只要有心，誰都能成佛!", "title_zh": "16 只要有心，谁都能成佛!"}, {"cid": "122961", "title": "17 沒有倒下的理由", "title_zh": "17 没有倒下的理由"}, {"cid": "122962", "title": "18 如意金箍棒", "title_zh": "18 如意金箍棒"}, {"cid": "122963", "title": "19 齊天大聖! 威震天下!", "title_zh": "19 齐天大圣! 威震天下!"}, {"cid": "122964", "title": "20 孫悟空的覺悟", "title_zh": "20 孙悟空的觉悟"}, {"cid": "122966", "title": "21 天選之凡人", "title_zh": "21 天选之凡人"}, {"cid": "122967", "title": "22 墮落紅塵的少年龍", "title_zh": "22 堕落红尘的少年龙"}, {"cid": "122968", "title": "23 師父!!", "title_zh": "23 师父!!"}, {"cid": "122969", "title": "24 匈懷大志的巨豬之王", "title_zh": "24 匈怀大志的巨猪之王"}, {"cid": "122970", "title": "25 沒有拜不到的師", "title_zh": "25 没有拜不到的师"}, {"cid": "122972", "title": "26 勾魂交易", "title_zh": "26 勾魂交易"}, {"cid": "122973", "title": "27 大師兄!!!", "title_zh": "27 大师兄!!!"}, {"cid": "122974", "title": "28 九尾狐讀心術", "title_zh": "28 九尾狐读心术"}, {"cid": "122975", "title": "29 為愛而死", "title_zh": "29 为爱而死"}, {"cid": "122976", "title": "30 永別!! 小狐狸!!", "title_zh": "30 永别!! 小狐狸!!"}, {"cid": "122978", "title": "31 內訌", "title_zh": "31 内讧"}, {"cid": "122979", "title": "32 六耳彌猴", "title_zh": "32 六耳弥猴"}, {"cid": "122980", "title": "33 奪命一棒", "title_zh": "33 夺命一棒"}, {"cid": "122981", "title": "34 一拳", "title_zh": "34 一拳"}, {"cid": "122982", "title": "35 萬神之國", "title_zh": "35 万神之国"}, {"cid": "122984", "title": "36 列陣", "title_zh": "36 列阵"}, {"cid": "122985", "title": "37 謎", "title_zh": "37 谜"}, {"cid": "122986", "title": "38 普善法王與日月神猴之死", "title_zh": "38 普善法王与日月神猴之死"}, {"cid": "122987", "title": "39 無神之境", "title_zh": "39 无神之境"}, {"cid": "122988", "title": "40 命運之子", "title_zh": "40 命运之子"}, {"cid": "122991", "title": "42 大召集", "title_zh": "42 大召集"}, {"cid": "122992", "title": "43 天下無神 妖怪當道", "title_zh": "43 天下无神 妖怪当道"}, {"cid": "122993", "title": "44 群妖鬧長安", "title_zh": "44 群妖闹长安"}, {"cid": "122994", "title": "45 逆流", "title_zh": "45 逆流"}, {"cid": "122996", "title": "46 偉大王者", "title_zh": "46 伟大王者"}, {"cid": "122997", "title": "47 血S暴潮", "title_zh": "47 血S暴潮"}, {"cid": "122998", "title": "48 聖人得道", "title_zh": "48 圣人得道"}, {"cid": "122999", "title": "49 結盟", "title_zh": "49 结盟"}, {"cid": "123000", "title": "50 屠龍", "title_zh": "50 屠龙"}, {"cid": "123002", "title": "51 混沌時代", "title_zh": "51 混沌时代"}, {"cid": "123003", "title": "52 蒼雷與紅蓮", "title_zh": "52 苍雷与红莲"}, {"cid": "123004", "title": "53 遺言", "title_zh": "53 遗言"}, {"cid": "123005", "title": "54 節制", "title_zh": "54 节制"}, {"cid": "123006", "title": "55 九十九鬼", "title_zh": "55 九十九鬼"}, {"cid": "123008", "title": "56 圍城", "title_zh": "56 围城"}, {"cid": "123009", "title": "57 阿修羅魔拳", "title_zh": "57 阿修罗魔拳"}, {"cid": "123010", "title": "58 無缺信念", "title_zh": "58 无缺信念"}, {"cid": "123011", "title": "59 狂、狂、狂", "title_zh": "59 狂、狂、狂"}, {"cid": "123012", "title": "60 狂王對無上", "title_zh": "60 狂王对无上"}, {"cid": "123014", "title": "61 恐懼", "title_zh": "61 恐惧"}]};
let lang = 'zh';
let mode = 'scroll';
let curPage = 0;
function renderMeta() {
const t = lang === 'zh' ? COMIC.zh_title : (lang === 'hant' ? COMIC.hant_title : COMIC.en_title);
const d = lang === 'zh' ? COMIC.zh_desc : (lang === 'hant' ? COMIC.hant_desc : COMIC.en_desc);
document.getElementById('hdrTitle').textContent = t;
document.getElementById('heroTitle').textContent = t;
document.getElementById('heroSub').textContent = `${COMIC.author} · 共 ${COMIC.volumes.length} 卷 / ${COMIC.chapters.length} 话`;
document.getElementById('heroDesc').textContent = d;
document.getElementById('heroCover').src = COMIC.pages[0] || '';
document.getElementById('chapCount').textContent = COMIC.chapters.length;
const tg = document.getElementById('heroTags');
tg.innerHTML = '';
(COMIC.tags || []).forEach(x => {
const s = document.createElement('span');
s.className = 'tag';
s.textContent = x;
tg.appendChild(s);
});
}
function renderCatalog() {
const g = document.getElementById('chapGrid');
g.innerHTML = '';
(COMIC.chapters || []).forEach((c, idx) => {
const d = document.createElement('div');
d.className = 'chap-item';
d.textContent = c.title_zh || c.title;
d.onclick = () => {
curPage = idx % COMIC.pages.length;
if (mode === 'flip') renderPages();
else document.querySelectorAll('.page-card')[curPage]?.scrollIntoView({behavior:'smooth'});
document.getElementById('catDrawer').classList.remove('open');
};
g.appendChild(d);
});
}
function renderPages() {
const wrap = document.getElementById('readerWrap');
wrap.className = 'reader-wrap ' + (mode === 'scroll' ? 'scroll-mode' : 'flip-mode');
const box = document.getElementById('pagesContainer');
box.innerHTML = '';
const list = mode === 'scroll' ? COMIC.pages : [COMIC.pages[curPage]];
list.forEach((url, i) => {
const idx = mode === 'scroll' ? i : curPage;
const card = document.createElement('div');
card.className = 'page-card';
card.innerHTML = `<img src="${url}" loading="lazy" alt="Page ${idx+1}"><div class="page-footer">第 ${idx+1} / ${COMIC.pages.length} 页 · ${COMIC.zh_title}</div>`;
if (mode === 'flip') card.onclick = () => stepPage(1);
box.appendChild(card);
});
document.getElementById('pageIndicator').textContent = `${curPage + 1} / ${COMIC.pages.length}`;
}
function setMode(m) {
mode = m;
document.getElementById('btnScroll').classList.toggle('active', m === 'scroll');
document.getElementById('btnFlip').classList.toggle('active', m === 'flip');
renderPages();
}
function stepPage(delta) {
curPage = (curPage + delta + COMIC.pages.length) % COMIC.pages.length;
renderPages();
}
function toggleCatalog() {
document.getElementById('catDrawer').classList.toggle('open');
}
function cycleLang() {
lang = lang === 'zh' ? 'hant' : (lang === 'hant' ? 'en' : 'zh');
renderMeta();
}
renderMeta();
renderCatalog();
renderPages();
</script>
</body>
</html>
