This commit is contained in:
zdh
@@ -1,344 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI 使用程度四级模型 — 演示文稿</title>
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: #1677FF; --color-primary-bg: #E6F4FF;
|
||||
--color-success: #52C41A; --color-success-bg: #F6FFED;
|
||||
--color-warning: #FAAD14; --color-warning-bg: #FFFBE6;
|
||||
--color-error: #FF4D4F; --color-error-bg: #FFF2F0;
|
||||
--bg: #0a0e1a; --bg-card: rgba(255,255,255,0.04);
|
||||
--border: rgba(255,255,255,0.08); --border-light: rgba(255,255,255,0.04);
|
||||
--text: #e8e8ed; --text-dim: rgba(255,255,255,0.55); --text-muted: rgba(255,255,255,0.35);
|
||||
--radius: 20px; --radius-sm: 12px;
|
||||
--shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box;}
|
||||
html,body{height:100%;overflow:hidden;}
|
||||
body{
|
||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
|
||||
background:var(--bg);color:var(--text);font-size:16px;line-height:1.5;
|
||||
}
|
||||
.slides{height:100%;position:relative;}
|
||||
.slide{
|
||||
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
|
||||
opacity:0;transform:translateY(30px);transition:all .45s cubic-bezier(.4,0,.2,1);
|
||||
pointer-events:none;padding:60px 80px;
|
||||
}
|
||||
.slide.active{opacity:1;transform:translateY(0);pointer-events:auto;}
|
||||
.slide-inner{max-width:1000px;width:100%;}
|
||||
|
||||
/* Title slide */
|
||||
.slide-title{font-size:clamp(28px,5vw,56px);font-weight:800;line-height:1.15;margin-bottom:20px;
|
||||
background:linear-gradient(135deg,#fff 0%,#a0c4ff 50%,#d3adf7 100%);
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
|
||||
.slide-sub{font-size:20px;color:var(--text-dim);font-weight:400;}
|
||||
|
||||
/* Level badges */
|
||||
.lvl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0;}
|
||||
.lvl-card{
|
||||
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
|
||||
padding:32px 24px;text-align:center;transition:all .2s;
|
||||
}
|
||||
.lvl-card:hover{border-color:var(--color-primary);transform:translateY(-2px);}
|
||||
.lvl-num{font-size:48px;font-weight:900;line-height:1;margin-bottom:12px;}
|
||||
.lvl-card:nth-child(1) .lvl-num{color:var(--color-primary);}
|
||||
.lvl-card:nth-child(2) .lvl-num{color:#597ef7;}
|
||||
.lvl-card:nth-child(3) .lvl-num{color:#b37feb;}
|
||||
.lvl-card:nth-child(4) .lvl-num{color:var(--color-error);}
|
||||
.lvl-name{font-size:20px;font-weight:700;margin-bottom:8px;}
|
||||
.lvl-desc{font-size:14px;color:var(--text-dim);line-height:1.5;}
|
||||
|
||||
/* Section headers */
|
||||
.sec-label{font-size:13px;text-transform:uppercase;letter-spacing:.15em;color:var(--color-primary);font-weight:600;margin-bottom:8px;}
|
||||
.sec-title{font-size:clamp(22px,4vw,40px);font-weight:800;line-height:1.2;margin-bottom:12px;}
|
||||
.sec-sub{font-size:16px;color:var(--text-dim);}
|
||||
|
||||
/* Tables */
|
||||
.tbl-wrap{overflow-x:auto;margin:24px 0;}
|
||||
table{width:100%;border-collapse:collapse;font-size:14px;}
|
||||
th,td{padding:12px 16px;border:1px solid var(--border);text-align:left;vertical-align:top;}
|
||||
th{background:rgba(255,255,255,0.06);font-weight:600;font-size:13px;color:var(--text-dim);white-space:nowrap;}
|
||||
td{color:var(--text-dim);}td strong{color:var(--text);}
|
||||
tr:hover td{background:rgba(22,119,255,0.06);}
|
||||
|
||||
/* Flow */
|
||||
.flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0;}
|
||||
.flow-node{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 20px;text-align:center;}
|
||||
.flow-node .fn-title{font-weight:700;font-size:15px;}
|
||||
.flow-node .fn-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}
|
||||
.flow-arrow{font-size:20px;color:var(--color-primary);}
|
||||
.flow-node.l2{border-color:rgba(89,126,247,0.4);background:rgba(89,126,247,0.08);}
|
||||
.flow-node.l3{border-color:rgba(255,77,79,0.4);background:rgba(255,77,79,0.08);}
|
||||
|
||||
/* Quote */
|
||||
.quote{font-size:18px;color:var(--text-dim);font-style:italic;border-left:3px solid var(--color-primary);padding-left:20px;margin:24px 0;}
|
||||
|
||||
/* Tags */
|
||||
.tag{display:inline-block;padding:3px 12px;border-radius:20px;font-size:12px;font-weight:600;}
|
||||
.tag-blue{background:rgba(22,119,255,0.15);color:var(--color-primary);}
|
||||
.tag-purple{background:rgba(179,127,235,0.15);color:#b37feb;}
|
||||
.tag-green{background:rgba(82,196,26,0.15);color:var(--color-success);}
|
||||
.tag-red{background:rgba(255,77,79,0.15);color:var(--color-error);}
|
||||
|
||||
/* Grid */
|
||||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;}
|
||||
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;}
|
||||
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0;}
|
||||
|
||||
/* Box */
|
||||
.box{padding:20px 24px;border-radius:var(--radius-sm);margin:16px 0;font-size:14px;}
|
||||
.box-blue{background:rgba(22,119,255,0.08);border:1px solid rgba(22,119,255,0.2);}
|
||||
.box-purple{background:rgba(179,127,235,0.08);border:1px solid rgba(179,127,235,0.2);}
|
||||
.box-green{background:rgba(82,196,26,0.08);border:1px solid rgba(82,196,26,0.2);}
|
||||
.box-red{background:rgba(255,77,79,0.08);border:1px solid rgba(255,77,79,0.2);}
|
||||
.box h4{margin-bottom:8px;font-size:15px;font-weight:700;}
|
||||
.box-blue h4{color:var(--color-primary);}.box-purple h4{color:#b37feb;}
|
||||
.box-green h4{color:var(--color-success);}.box-red h4{color:var(--color-error);}
|
||||
.box p{margin:4px 0;color:var(--text-dim);line-height:1.6;}
|
||||
|
||||
/* Controls */
|
||||
.controls{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:100;}
|
||||
.ctrl-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
|
||||
.ctrl-btn:hover{background:var(--color-primary);border-color:var(--color-primary);}
|
||||
.dots{display:flex;gap:8px;}
|
||||
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all .3s;cursor:pointer;}
|
||||
.dot.active{background:var(--color-primary);width:24px;border-radius:4px;}
|
||||
.counter{font-size:13px;color:var(--text-muted);min-width:60px;text-align:center;}
|
||||
|
||||
@media(max-width:768px){
|
||||
.slide{padding:40px 24px;}.lvl-row{grid-template-columns:1fr 1fr;gap:12px;}
|
||||
.grid2,.grid3,.grid4{grid-template-columns:1fr;}
|
||||
.flow{flex-direction:column;}.flow-arrow{transform:rotate(90deg);}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="slides" id="slides">
|
||||
|
||||
<!-- Slide 0: Title -->
|
||||
<div class="slide active"><div class="slide-inner">
|
||||
<div class="sec-label">一人公司知识库 · 抖音话题</div>
|
||||
<div class="slide-title">AI 使用程度四级模型</div>
|
||||
<div class="slide-sub">L1 辅助 → L2 增强 → L2.5 协同 → L3 自主<br>软件公司 8 角色 × 4 等级 AI 协同全景</div>
|
||||
<div class="flow" style="margin-top:40px;">
|
||||
<div class="flow-node"><div class="fn-title">L1<br>辅助</div></div><span class="flow-arrow">→</span>
|
||||
<div class="flow-node l2"><div class="fn-title">L2<br>增强</div></div><span class="flow-arrow">→</span>
|
||||
<div class="flow-node" style="border-color:rgba(179,127,235,0.4);background:rgba(179,127,235,0.08);"><div class="fn-title">L2.5<br>协同</div></div><span class="flow-arrow">→</span>
|
||||
<div class="flow-node l3"><div class="fn-title">L3<br>自主</div></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 1: Four Levels Overview -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">等级总览</div>
|
||||
<div class="sec-title">四个等级 · 人机关系质变</div>
|
||||
<div class="lvl-row">
|
||||
<div class="lvl-card">
|
||||
<div class="lvl-num">1</div><div class="lvl-name">AI 辅助</div>
|
||||
<div class="lvl-desc">人干主体<br>AI 打下手<br><br>网页 LLM + IDE 补全</div>
|
||||
</div>
|
||||
<div class="lvl-card">
|
||||
<div class="lvl-num">2</div><div class="lvl-name">AI 增强</div>
|
||||
<div class="lvl-desc">AI 出初稿<br>人做审核决策<br><br>Claude Code + RAG 知识库</div>
|
||||
</div>
|
||||
<div class="lvl-card">
|
||||
<div class="lvl-num">2.5</div><div class="lvl-name">人机协同</div>
|
||||
<div class="lvl-desc">AI 主导执行<br>人实时监督干预<br><br>+ CI/CD AI 阻断 + MCP</div>
|
||||
</div>
|
||||
<div class="lvl-card">
|
||||
<div class="lvl-num">3</div><div class="lvl-name">AI 自主</div>
|
||||
<div class="lvl-desc">AI 独立完成任务链路<br>人定目标做验收<br><br>+ 多 Agent 编排</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box box-blue"><h4>💡 关键认识</h4>
|
||||
<p>① 每个角色有适合自己的等级上限 ② 同一组织各角色等级可以不同 ③ 真正质变发生在<strong>多角色 AI 产物互联互通</strong>时</p>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 2: Level 1 & 2 Details -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">L1 → L2</div>
|
||||
<div class="sec-title">从"AI 打下手"到"人审 AI 产物"</div>
|
||||
<div class="grid2">
|
||||
<div class="box box-blue">
|
||||
<h4>L1 · AI 辅助</h4>
|
||||
<p><strong>工具</strong>：ChatGPT / Copilot / WPS AI</p>
|
||||
<p><strong>开发</strong>：代码补全、查 API → 查文档 分钟→秒</p>
|
||||
<p><strong>售前</strong>：方案润色、术语解释</p>
|
||||
<p><strong>售后</strong>：报错翻译、SQL 生成</p>
|
||||
<p><strong>协作</strong>：无实质性跨角色协作</p>
|
||||
<p style="color:var(--color-warning);margin-top:8px;">⚠️ 别在 L1 待超过 3 个月</p>
|
||||
</div>
|
||||
<div class="box box-purple">
|
||||
<h4>L2 · AI 增强</h4>
|
||||
<p><strong>工具</strong>：Claude Code + Dify RAG + CLAUDE.md</p>
|
||||
<p><strong>开发</strong>：生成模块初稿 → 从"写代码"到"审代码"</p>
|
||||
<p><strong>售前</strong>：方案编写 2-3 周 → 2-3 天</p>
|
||||
<p><strong>售后</strong>：问题定位 半天→十分钟</p>
|
||||
<p><strong>协作</strong>：售前 AI → 知识库 → 开发 AI，产物开始互联</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box box-green" style="margin-top:8px;"><h4>🔑 L2 核心基础设施：四层知识库</h4>
|
||||
<p>L1 项目规约 → L2 架构资产 → L3 历史方案 → L4 踩坑经验</p></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 3: Level 2.5 -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">L2.5 · 目标态</div>
|
||||
<div class="sec-title">人机协同——大多数公司的最佳平衡点</div>
|
||||
<div class="quote">"AI 主导执行，人实时监督。L3 的全自主对大多数团队反而不现实。"</div>
|
||||
<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>角色</th><th>AI 干什么</th><th>人干什么</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><strong>🖥 开发</strong></td><td>主导完整功能模块（需求→编码→测试→Commit）</td><td>PR 审查、架构方向把关</td></tr>
|
||||
<tr><td><strong>📊 售前</strong></td><td>端到端投标全流程（标书→方案→PPT）</td><td>竞争策略、报价决策</td></tr>
|
||||
<tr><td><strong>🔧 售后</strong></td><td>实时分析日志，自动诊断+推荐修复方案</td><td>生产变更审批</td></tr>
|
||||
<tr><td><strong>💬 客服</strong></td><td>自主接待 80% 常规问题</td><td>处理特殊投诉</td></tr>
|
||||
<tr><td><strong>📋 PM</strong></td><td>实时监控进度+风险预警+AI 站会</td><td>团队人事决策</td></tr>
|
||||
<tr><td><strong>🎯 总经理</strong></td><td>经营数据汇聚 → 分析 → 预警 → 方案推演</td><td>定方向、做决策</td></tr>
|
||||
</tbody></table></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 4: Four Collaboration Loops -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">L2.5 的核心价值</div>
|
||||
<div class="sec-title">四个跨角色 AI 协作闭环</div>
|
||||
<div class="grid2">
|
||||
<div class="box box-blue"><h4>① 售前 → 开发 → 售后</h4>
|
||||
<p>售前承诺自动转化需求矩阵 → 开发 ADR 进入售后知识库 → 真实工况反哺售前校验</p></div>
|
||||
<div class="box box-green"><h4>② 客服 → 产品 → 开发</h4>
|
||||
<p>AI 聚类高频投诉 → 推送 backlog → 开发修复 → 自动更新客服模板</p></div>
|
||||
<div class="box box-purple"><h4>③ PM ↔ 全员</h4>
|
||||
<p>PM AI 拉取各角色实时数据 → 自动汇总预警 → 各 AI 同步调整计划</p></div>
|
||||
<div class="box box-red"><h4>④ 总经理驾驶舱</h4>
|
||||
<p>售前漏斗 + 交付进度 + 人效 + 财务 → 实时看板，不再靠"要报表"</p></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 5: Level 3 -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">L3 · 终态</div>
|
||||
<div class="slide-title" style="font-size:clamp(24px,4vw,44px);">AI Agent 舰队</div>
|
||||
<div class="slide-sub">1 个人 + AI = 传统 5-8 人团队</div>
|
||||
<div class="flow" style="margin:30px 0;">
|
||||
<div class="flow-node l3"><div class="fn-title">售前 Agent</div><div class="fn-sub">签单 → 结构化需求</div></div>
|
||||
<span class="flow-arrow">→</span>
|
||||
<div class="flow-node l3"><div class="fn-title">交付 Agent</div><div class="fn-sub">排资源 → 分派</div></div>
|
||||
<span class="flow-arrow">→</span>
|
||||
<div class="flow-node l3"><div class="fn-title">开发 Agent 群</div><div class="fn-sub">并行编码+测试</div></div>
|
||||
<span class="flow-arrow">→</span>
|
||||
<div class="flow-node l3"><div class="fn-title">售后 Agent</div><div class="fn-sub">自动部署+监控</div></div>
|
||||
</div>
|
||||
<div class="box box-red"><h4>⚠️ L3 的现实边界</h4>
|
||||
<p>大多数公司到 L2.5 就足够 · L3 瓶颈在信任和组织 · 建议开发线试点 · 红线：关键操作必须人审批</p></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 6: Role Matrix -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">角色矩阵</div>
|
||||
<div class="sec-title">8 角色 × 4 等级 · 建议目标</div>
|
||||
<div class="tbl-wrap"><table>
|
||||
<thead><tr><th>角色</th><th>L1</th><th>L2</th><th>L2.5</th><th>L3</th><th>目标</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>🖥 开发</td><td>补全+查 API</td><td>生成模块初稿</td><td>主导功能模块</td><td>多 Agent 并行</td><td><span class="tag tag-red">L3</span></td></tr>
|
||||
<tr><td>📊 售前</td><td>润色+查资料</td><td>出方案初稿</td><td>端到端投标</td><td>自主交付全流程</td><td><span class="tag tag-purple">L2.5</span></td></tr>
|
||||
<tr><td>🔧 售后</td><td>翻译报错</td><td>匹配历史案例</td><td>实时诊断推荐</td><td>7×24 自愈</td><td><span class="tag tag-purple">L2.5</span></td></tr>
|
||||
<tr><td>💬 客服</td><td>话术润色</td><td>分类+模板</td><td>自主接待80%</td><td>自主接待95%</td><td><span class="tag tag-blue">L2</span></td></tr>
|
||||
<tr><td>📋 PM</td><td>文档排版</td><td>计划+周报</td><td>实时监控预警</td><td>管全周期</td><td><span class="tag tag-purple">L2.5</span></td></tr>
|
||||
<tr><td>💰 财务</td><td>公式+提取</td><td>审核+出报表</td><td>全量自动处理</td><td>自主核算调度</td><td><span class="tag tag-blue">L2</span></td></tr>
|
||||
<tr><td>👥 人力</td><td>JD生成</td><td>筛简历汇总</td><td>初面+绩效</td><td>全流程招聘</td><td><span class="tag tag-blue">L2</span></td></tr>
|
||||
<tr><td>🎯 总经理</td><td>信息摘要</td><td>分析报告</td><td>推演预警看板</td><td>AI经营大脑</td><td><span class="tag tag-purple">L2.5</span></td></tr>
|
||||
</tbody></table></div>
|
||||
<div class="box box-blue"><h4>💡 选级逻辑</h4><p>追 L3：开发（产出是代码，ROI 最高） · 停 L2.5：售前/售后/PM/总经理 · 停 L2：客服/财务/人力（合规敏感）</p></div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 7: Roadmap -->
|
||||
<div class="slide"><div class="slide-inner">
|
||||
<div class="sec-label">落地路线</div>
|
||||
<div class="sec-title">12 周启动计划</div>
|
||||
<div class="grid2">
|
||||
<div class="box box-blue"><h4><span class="tag tag-green">热身</span> 0-4 周</h4>
|
||||
<p>全员配 L1 工具 · 写 CLAUDE.md · 选 1-2 个开发试点 Claude Code<br>目标：每人至少 1 个日常场景用上 AI</p></div>
|
||||
<div class="box box-purple"><h4><span class="tag tag-blue">基建</span> 4-12 周</h4>
|
||||
<p>Dify+pgvector 知识库 · 首批 100+ 文档入库 · CI 质量门禁<br>目标：售前方案初稿可用 AI 生成</p></div>
|
||||
<div class="box box-green"><h4><span class="tag tag-purple">协同</span> 3-6 月</h4>
|
||||
<p>打通各角色 AI 数据 · 建 AI API 网关 · 四层知识库全覆盖<br>目标：至少 2 个跨角色 AI 闭环跑通</p></div>
|
||||
<div class="box box-red"><h4><span class="tag tag-red">深化</span> 6-12 月</h4>
|
||||
<p>开发线 L3 试点 · 经营驾驶舱上线 · 持续迭代知识库<br>目标：全角色 AI 采纳率 > 60%</p></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- Slide 8: Closing -->
|
||||
<div class="slide"><div class="slide-inner" style="text-align:center;">
|
||||
<div class="sec-label">记住这一句</div>
|
||||
<div class="slide-title" style="font-size:clamp(22px,4vw,42px);">单角色用 AI 是提效<br>多角色 AI 协同才是模式升级</div>
|
||||
<div class="slide-sub" style="margin-top:24px;">省人是一道减法题，算完就没了<br>增值是一道乘法题，上不封顶</div>
|
||||
<div style="margin-top:48px;color:var(--text-muted);font-size:14px;">
|
||||
完整报告：wiki.ycbat.com/抖音主题/报告/ai-usage-levels-for-software-company.html
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="ctrl-btn" id="prev" aria-label="上一页">◀</button>
|
||||
<div class="dots" id="dots"></div>
|
||||
<button class="ctrl-btn" id="next" aria-label="下一页">▶</button>
|
||||
<span class="counter" id="counter">1 / 9</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var slides = document.querySelectorAll('.slide');
|
||||
var dotsEl = document.getElementById('dots');
|
||||
var counter = document.getElementById('counter');
|
||||
var current = 0;
|
||||
var total = slides.length;
|
||||
|
||||
for(var i=0;i<total;i++){
|
||||
var d = document.createElement('span');d.className='dot';d.dataset.idx=i;
|
||||
d.addEventListener('click',function(){goTo(parseInt(this.dataset.idx));});
|
||||
dotsEl.appendChild(d);
|
||||
}
|
||||
var dots = document.querySelectorAll('.dot');
|
||||
|
||||
function goTo(idx){
|
||||
slides[current].classList.remove('active');dots[current].classList.remove('active');
|
||||
current = idx;
|
||||
slides[current].classList.add('active');dots[current].classList.add('active');
|
||||
counter.textContent = (current+1) + ' / ' + total;
|
||||
}
|
||||
|
||||
document.getElementById('prev').addEventListener('click',function(){
|
||||
if(current>0) goTo(current-1);
|
||||
});
|
||||
document.getElementById('next').addEventListener('click',function(){
|
||||
if(current<total-1) goTo(current+1);
|
||||
});
|
||||
document.addEventListener('keydown',function(e){
|
||||
if(e.key==='ArrowLeft'){e.preventDefault();if(current>0) goTo(current-1);}
|
||||
if(e.key==='ArrowRight'){e.preventDefault();if(current<total-1) goTo(current+1);}
|
||||
});
|
||||
|
||||
var startX=0;
|
||||
document.addEventListener('touchstart',function(e){startX=e.touches[0].clientX;});
|
||||
document.addEventListener('touchend',function(e){
|
||||
var dx = e.changedTouches[0].clientX - startX;
|
||||
if(dx>50 && current>0) goTo(current-1);
|
||||
if(dx<-50 && current<total-1) goTo(current+1);
|
||||
});
|
||||
|
||||
dots[current].classList.add('active');
|
||||
counter.textContent = '1 / ' + total;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user