<h1 data-step="1" data-intro="Hello all! :) 第一步：This project's called Intro.js." style="text-align:center">1.Intro.js</h1>
<p data-step="4" data-intro="第四步:Let's try it. It's free and open-source." class="lead">4.更好的介绍网站和功,以便逐步为您指导项目。</p>
<div class="introjs-content">
  <div data-step="2" data-intro="第二步:Ok, wasn't that fun?" data-position="right" class="divcont">
    <h4>2.容易使用</h4>
    <p>包括js和css文件， 调价"data-step" 和 "data-intro" 到你的代码。</p>
  </div>
  <div data-step="3" data-intro="第三步：More features, more fun." data-position="left" class="divcont">
    <h4>3.键盘 + 鼠标 控制 </h4>
    <p>用鼠标, 或键盘  "←"控制后退, "→"控制前进, "ENTER" 和 "ESC" 控制退出.</p>
  </div>
  <div data-step="5" data-intro="第五步:Get it, use it." class="divcont">
    <h4>5.快 &amp; 小</h4>
    <p>仅需4 KB JavaScript 和 2.5 KB CSS (gzip).</p>
  </div>
  <div data-step="6" data-intro="第六步:Last step." class="divcont">
    <h4>6.跨浏览器兼容性</h4>
    <p>它兼容最近版本的火狐,Chrome和IE8，更好的兼容性需要进一步开发。</p>
  </div><a href="javascript:void(0);" class="sui-btn btn-xlarge btn-primary">展示操作</a>
</div>
<script>
  $(".btn-primary").click(function(){
      $.introJs().start();
  })
  
  
</script>

备注：插件参考第三方来源：http://usablica.github.io/intro.js/

1.在标签里加属性"data-step"标示是第几步；加"data-intro"添加提示语句；"data-position"控制提示框出现位置，可选left、right、top、bottom-middle-aligned、bottom-right-aligned,不写默认为下方。

2.可用鼠标控制，也可以用键盘控制："←", "→","ENTER" 和 "ESC"控制。

3.调用"$.introJs().start();"可触发新手指引。

可通过introJs传入改变的参数

名称	默认值	说明
nextLabel	下一步	下一步按钮上的显示文字
prevLabel	上一步	上一步按钮上的显示文字
skipLabel	退出	退出按钮上的显示文字
doneLabel	结束	结束按钮上的显示文字
tooltipPosition	bottom	data-position初始值
exitOnEsc	true	是否可用ESC键退出
showStepNumbers	true	是否显示步骤数
exitOnOverlayClick	true	是否可点击背景退出
keyboardNavigation	true	是否可用键盘控制
showButtons	true	是否限制控制按钮
showBullets	true	是否显示点点
scrollToElement	true	是否滚动到下一步骤
overlayOpacity	0.8	背景透明值

可通过introJs调用的方法

名称	说明
clone	下一步	下一步按钮上的显示文字
prevLabel	上一步	上一步按钮上的显示文字
skipLabel	退出	退出按钮上的显示文字
doneLabel	结束	结束按钮上的显示文字
tooltipPosition	bottom	data-position初始值