话说正在做项目中的帮助指引功能，即分步指引功能，查找了很多插件都不太符合需求，所以自己写了个简单的插件，只需要改改样式就能满足于各种需求了。（兼容IE7+，IE6未测试，intro Box样式用到CSS3，所以在Firfox或chrome浏览器效果最佳）
话不多说，插件代码如下：

/*
    1、各初始化参数已经在注释中指明
    2、使用插件时，指定触发事件的button即可，可多次实例化。
    3、对于已有 非position:relative定位样式的元素 注意在stepIntro.css后，重新将定位写一遍以防止被覆盖。
    4、每个step介绍文字的box都会添加相应class,如 第一步，1会添加class "step1" (其它如step2、step3等)，
       可以单独设置每个介绍文字box的样式。
    5、具体使用参考说明和实例		   
*/

(function($){
  stepIntroId=0;
  $.fn.stepIntro=function(options){
	  
	  var defaults={
		  stepTag:"data-step",
		  animation:true
	  };
	  var opts=$.extend(defaults,options);
	  
	  if(!opts.introBoxId){
		  opts.introBoxId="stepIntroBox"+stepIntroId;
		  stepIntroId++;
	  }
	  
	  var introBox=$("#"+opts.introBoxId),stepArr=[],i=0;

	  //intro JSON初始遍历
	  for(var o in opts.intro){
		  	stepArr[i]=o;
			i++;
	  }
	  
	  //未指定stepFirst则默认为JSON中的第一个步骤
	  if(!opts.stepFirst){
		  opts.stepFirst=stepArr[0];
	  }
	  
	  //STEP索引
	  var stepIndex=function(now,tag){
		  	  var j=0; 
			  for(var o in opts.intro){
				  if(o==now){
					  return tag=="pre"?stepArr[j-1]:stepArr[j+1];
				  }
				  j++;
			  }
		  }
		  
	  //stepBox样式重置
	  var stepBoxInit=function(){
		  	  $(".stepBox").each(function(index, element) {
				  var step=$(this).attr(opts.stepTag);
                  $(this).removeClass("stepBox step"+step);
              });		  
		  }
		  
	  //关闭STEP导航
	  var closeStep=function(){
			  stepBoxInit();
		  	  introBox.hide();
			  $("#intro-overlay").hide();
			  introBox.find(".close-step").hide();
		  }
		  
	  //导航BOX位置自动设置
	  var boxPosSet=function(waitIntroBox,introBox){
		  	  var l=waitIntroBox.offset().left,
			  	  t=waitIntroBox.offset().top,
			  	  w=waitIntroBox.outerWidth(true),
			  	  h=waitIntroBox.height(),
			  	  iw=introBox.outerWidth(true),
			  	  ih=introBox.height();

			  //将Intro滑动到可视区域
			  if(t<0||opts.animation||(t+h>$(window).height())){
				  $('html,body').animate({ scrollTop: t-20 }, 200);
			  }
			  
			  //Intro 超过可视区 则自动移动方位 优先级右->左->下
			  checkR=$(window).width()-(l+w+iw);
			  checkL=l-iw;
			  
			  if(checkR>0){
				  introBox.css({left:l+w+10,top:t});
			  }else if(checkL>0){
				  introBox.css({left:l-iw-10,top:t});
			  }else{
				  introBox.css({left:l,top:t+h+10});
			  }
		  }
	   
	   //事件绑定
	   var eventBind=function(){
			  introBox.find(".pre-step,.next-step").click(function(){
				  var step=$(this).attr("step");
				  stepSet(step);
			  })
			  introBox.find(".close-step,.close-step-btn").click(function(){
				  closeStep();
			  })
		   
		   }
		  
	  //STEP设置
	  var stepSet=function(now){
		      var waitIntroBox=$("["+opts.stepTag+"="+now+"]");
			  
			  //标记检查
			  if(waitIntroBox.size()==0){
				  alert("HTML文档中没有"+opts.stepTag+"为 "+now+" 的标记！");
				  return false;
			  }
			  
		  	  var stepIndexPre=stepIndex(now,"pre"),
			   	  stepIndexNext=stepIndex(now,"next"),
				  introContent=opts.intro[now];
			
			  //元素重置初始状态
			  stepBoxInit();
			  introBox.find(".close-step,.pre-step,.next-step").hide();
			  
			  //添加遮罩层
		  	  if($("#intro-overlay").size()==0){
				  $("body").append('<div id="intro-overlay"></div>');
			  }

			  //添加intro Box			  
			  if(introBox.size()==0){
				  var introBoxStr=
				   '<div class="stepIntroBox" id="'+opts.introBoxId+'">\
				   		<span class="step-num">0</span>\
    					<span class="introContent"></span>\
        				<span class="introButtonBox">\
       	 					<button class="step-button pre-step">上一步</button>\
        					<button class="step-button next-step">下一步</button>\
							<button class="step-button close-step">关闭</button>\
        				</span>\
						<span class="close-step-btn" title="关闭">X</span>\
    			   </div>';
				   $("#intro-overlay").append(introBoxStr);
				   introBox=$("#"+opts.introBoxId);
				   eventBind(); //事件绑定
			  }

			  //上/下 一步按钮显示控制
			  if(stepIndexPre){
			  	 introBox.find(".pre-step").attr("step",stepIndexPre).show();
			  }
			  if(stepIndexNext){
				 introBox.find(".next-step").attr("step",stepIndexNext).show();
			  }else{
				  introBox.find(".close-step").show();
			  }
			  
			  waitIntroBox.addClass("stepBox step"+now);
			  introBox.find(".step-num").text(now).end().find(".introContent").html(introContent).end().show();
			  $("#intro-overlay").show();
			  boxPosSet(waitIntroBox,introBox); //Set Position
		  }
		  
	  return this.each(function(){
		  
		  $(this).click(function(){
			  var stepFirst=opts.stepFirst;
			  stepSet(stepFirst);
		  })
		  
	  });
  } 
})(jQuery);

调用方法：

 //需引入文件 stepIntro.css和stepIntro.js两个文件

//简单调用 指定步骤json即可
$(".start-button").stepIntro({
    intro:{  //每步说明（可以为html）
        1:"这是导航条",
        2:"这是一张图片",
        3:"这是一个绝对定位元素",
        4:"这是一些介绍文字，告诉你该怎么使用"
    }
});

//完整调用
$(".start-button").stepIntro({
    introBoxId:"", //分步导航的ID (默认自动设置ID，如果自行定义，为保证重用，必须唯一)
    stepFirst:1,  //导航从第几步开始
    animation:true, //是否打开scroll滚动动画效果（默认为true,为false时只有被介绍内容不在可视区域时才调用）
    stepTag:"data-step", //HTML文档中步骤标记（默认为data-step,多次实例化时请指定不同data-step）
    intro:{  //每步说明（可以为html）
        1:"这是导航条",
        2:"这是一张图片",
        3:"这是一个绝对定位元素",
        4:"这是一些介绍文字，告诉你该怎么使用",
        5:"这是插件源码"
    }
});

文章附有演示文档，及源文件下载。

【源码下载】：jq_step_intro.zip