jQuery键盘控制PPT幻灯片特效是一款网页类似PPT的演讲稿幻灯片插件，它可以通过键盘上下左右方向键来控制，也可以用鼠标控制。并且左上角带有菜单按钮，通过菜单项可以选择相应的幻灯片页面。
关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery键盘控制PPT幻灯片特效</title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<div class="cd-slideshow-wrapper">
<nav class="cd-slideshow-nav">
<button class="cd-nav-trigger">
Open Nav
<span aria-hidden="true"></span>
</button>
<div class="cd-nav-items">
<ol>
<li><a href="#slide-1">Slide 1</a></li>
<li>
<a href="#slide-2">Slide 2</a>
<ol class="sub-nav">
<li><a href="#slide-2">Slide 2 - Sub 1</a></li>
<li><a href="#slide-2">Slide 2 - Sub 2</a></li>
<li><a href="#slide-2">Slide 2 - Sub 3</a></li>
</ol>
</li>
<li><a href="#slide-3">Slide 3</a></li>
<li><a href="#slide-4">Slide 4</a></li>
<li><a href="#slide-5">Slide 5</a></li>
<li>
<a href="#slide-6">Slide 6</a>
<ol class="sub-nav">
<li><a href="#slide-6">Slide 6 - Sub 1</a></li>
<li><a href="#slide-6">Slide 6 - Sub 2</a></li>
</ol>
</li>
</ol>
</div> <!-- .cd-nav-items -->
</nav> <!-- .cd-slideshow-nav -->
<ol class="cd-slideshow">
<li class="visible" id="slide-1">
<div class="cd-slider-content">
<div class="content-wrapper">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>可以使用键盘的上下左右方向键来控制</p>
<svg version="1.1" id="icon-keyboard" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="186px" height="60px" viewBox="0 0 186 60" enable-background="new 0 0 186 60" xml:space="preserve">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M119,59H67c-1.10457,0-2-0.89543-2-2V36
c0-1.10457,0.89543-2,2-2h52c1.10457,0,2,0.89543,2,2v21C121,58.10457,120.10457,59,119,59z"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M119,26H67c-1.10457,0-2-0.89543-2-2V3
c0-1.10457,0.89543-2,2-2h52c1.10457,0,2,0.89543,2,2v21C121,25.10457,120.10457,26,119,26z"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M55,59H3c-1.10457,0-2-0.89543-2-2V36
c0-1.10457,0.89543-2,2-2h52c1.10457,0,2,0.89543,2,2v21C57,58.10457,56.10457,59,55,59z"/>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M183,59h-52c-1.10457,0-2-0.89543-2-2V36
c0-1.10457,0.89543-2,2-2h52c1.10457,0,2,0.89543,2,2v21C185,58.10457,184.10457,59,183,59z"/>
<path fill="#FFFFFF" d="M92.54309,49.97196l-3.23061-7.26889C89.16552,42.37243,89.40755,42,89.76938,42h6.46124
c0.36182,0,0.60386,0.37243,0.4569,0.70307l-3.23061,7.26889C93.28094,50.36787,92.71906,50.36787,92.54309,49.97196z"/>
<path fill="#FFFFFF" d="M92.54309,10.02804l-3.23061,7.26889C89.16552,17.62757,89.40755,18,89.76938,18h6.46124
c0.36182,0,0.60386-0.37243,0.4569-0.70307l-3.23061-7.26889C93.28094,9.63213,92.71906,9.63213,92.54309,10.02804z"/>
<path fill="#FFFFFF" d="M25.02804,46.04309l7.26889-3.23062C32.62757,42.66552,33,42.90755,33,43.26938v6.46124
c0,0.36183-0.37243,0.60386-0.70307,0.45691l-7.26889-3.23062C24.63213,46.78095,24.63213,46.21905,25.02804,46.04309z"/>
<path fill="#FFFFFF" d="M160.97197,46.04309l-7.26891-3.23062C153.37242,42.66552,153,42.90755,153,43.26938v6.46124
c0,0.36183,0.37242,0.60386,0.70306,0.45691l7.26891-3.23062C161.36787,46.78095,161.36787,46.21905,160.97197,46.04309z"/>
</svg>
</div>
</div>
</li>
<li id="slide-2">
<ol class="sub-slides">
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #2</h2>
</div>
</div>
</li>
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #2 - Sub #1</h2>
</div>
</div>
</li>
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #2 - Sub #2</h2>
</div>
</div>
</li>
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #2 - Sub #3</h2>
</div>
</div>
</li>
</ol> <!-- .sub-slides -->
</li>
<li id="slide-3">
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #3</h2>
</div>
</div>
</li>
<li id="slide-4">
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #4</h2>
</div>
</div>
</li>
<li id="slide-5">
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #5</h2>
</div>
</div>
</li>
<li id="slide-6">
<ol class="sub-slides">
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #6</h2>
</div>
</div>
</li>
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #6 - Sub #1</h2>
</div>
</div>
</li>
<li>
<div class="cd-slider-content">
<div class="content-wrapper">
<h2>Slider #6 - Sub #2</h2>
</div>
</div>
</li>
</ol> <!-- .sub-slides -->
</li>
</ol> <!-- .cd-slideshow -->
</div> <!-- .cd-slideshow-wrapper -->
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
系统已开启自动识别垃圾评论机制，识别到的自动封号，下载出错或者资源有问题请联系全栈客服QQ 1915635791