[本文为转载——重编辑]
插件描述：所有的所有，都直接调用！
pagewalkthrough.js 引导内容支持html内容，你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好，直接用css调用，关于字体，你可以调用外部字体，如手写字体可能效果更好。
首先在你的原有网站页面中引入jQuery库和pagewalkthrough插件。
注意你的引用路径是否正确！
<!-- CSS --> <link rel="stylesheet" href="css/jquery.pagewalkthrough.css"> <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- Page walkthrough plugin（插件） --> <script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>
接着，在我们的页面最下部加入引导内容（当然这些代码还是在<body>和</body>标签之间的最后面！），这些内容就是每一步需要展示的内容，需要先隐藏，等下会用jQuery来调用的。
手动隐藏设置：（为什么这里要手动设置呢？因为你下载的东东，没有设置在CSS中！）
在页面<head>和</head>间加入样式：
<style type="text/css">
#walkthrough-content{display:none}
</style>这里，复制粘贴吧！放在<body>和</body>标签之间的最后面！是的，最后面，最后面，最后面！
<div id="walkthrough-content"> <div id="walkthrough-1"> <h3>欢迎来到PageWalkThrough示例DEMO演示页</h3> <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p> <p>这里可以用HTML标签语句哟！如链接：本文由<a href="http://qoogle.cn" target="_blank">qoogle.cn</a>重编辑的。</p> <p>点击下一步了解更多...</p> </div> <div id="walkthrough-2"> 这里是qoogle.cn网站的LOGO，点击这里可以直通网站首页。 </div> <div id="walkthrough-3"> 点击这里可以直接看WalkThrough插件的使用教程。 </div> <div id="walkthrough-4"> 点击这里可以去WalkThrough官网查看源码和原码，全英文的哦。。 </div> <div id="walkthrough-5"> 这是本文介绍的WalkThrough引导页 </div> </div>
引导内容是支持html标签的，你可以在里面用html标签加入链接、图片等信息。
还有就是引导页所需的箭头图片已经打包好，直接用css调用（自动调用，因为有jquery.pagewalkthrough.css），关于字体，你可以调用外部字体，如手写字体可能效果更好。
你需要改的是：1、文字内容（支持HTML）；2、增加步数，即复制粘贴内容部分的一对<div>标签，然后改递增数字。
接下来就是用jQuery调用上面的内容，
复制下面代码，放置上面代码的下面。
<script>
$(function() {
// Set up tour
$('body').pagewalkthrough({
name: 'introduction',
steps: [
{ popup: {content: '#walkthrough-1',type: 'modal' }
}, {wrapper: '#logo',popup: {content: '#walkthrough-2',type: 'tooltip',position: 'bottom'}
}, {wrapper: 'h2.top_title a',popup: {content: '#walkthrough-3',type: 'tooltip',position: 'bottom'}
}, {wrapper: 'a[href="http://files.cnblogs.com/files/hnyei/jq_zhezhaoyd.rar"]', popup: {content: '#walkthrough-4',type: 'tooltip',position: 'right'}
}, {wrapper: '#footer p',popup: {content: '#walkthrough-5',type: 'tooltip',position: 'top'}
}, {wrapper: '#main a span.STYLE1',popup: {content: '#walkthrough-6',type: 'tooltip',position: 'top'}
}]
});
// Show the tour
$('body').pagewalkthrough('show');
});
</script>你可能需要修改的地方，有4处：
1、wrapper后面的单引号 ' ' 里面的内容。它是代表在你的页面中寻址定位对应的元素（需要唯一定位！），你可以利用浏览器自带的“开发者工具”查找你的元素标签。
2、content是定义关联的内容元素，你如果是和我一样的小白，只改#walkthrough后面的数字吧，这和上面的代码中的内容ID是对应的哟。
3、type是引导显示的方式，有三种：tooltip（特指区域）、modal（全局，不特指区域）以及nohighlight（没有高亮）。我也不懂，你看着办。
4、position是你的内容在你高亮指定区域的相对位置，有四个（top、left、right、bottom）。别问我，我英文不好，只知道28个字母^_^
OK了，保存，刷新你的页面，看看效果吧！
===========================
原文、在线演示、源码下载，地址如下：
https://www.helloweba.com/view-blog-286.html
项目官网，gitbub源码：https://github.com/jwarby/jquery-pagewalkthrough
pagewalkthrough.js参数配置。
| 参数 | 描述 | 默认值 |
| popup | 弹出提示引导层 | |
| wrapper | 当前引导对应的元素位置 | |
| type | 弹出方式（tooltip和modal以及nohighlight） | tooltip |
| position | 弹出层位置（top,left, right or bottom） | bottom |
| offsetHorizontal | 是否水平显示 | 0 |
| offsetVertical | 是否垂直显示 | 0 |
| width | 弹出层宽度 | 320 |
| contentRotation | 是否跳过 默认不跳过 | 0 |
| autoScroll | 是否自动滚动 | true |
| scrollSpeed | 滚动速度 单位毫秒 | 1000 |
| lockScrolling | 是否锁定滚动 默认不锁 | false |
| onEnter | 当按enter回调 | null |
| onLeave | 当结束回调 | null |
发表评论(不用注册哟！)