自定义属性 "data-guide-index" 的值为数字，代表引导层出场次序。 比如 `<h2 class="title" data-guide-index="1">` ，表示引导第一步的定位点。另引导展示层的 class 为 guide-step，id 为 guideStep + 数字，用于应用样式。

guide.js

/**
 * 界面引导帮助
 */
function Guide() {
  this.target_arr = [];
  this.intervalID = null;
}

Guide.prototype.init = function() {
  var _this = this;
  
  var mask_css = "position: fixed; z-index: 850; background-color: rgb(0, 0, 0); opacity: 0.3; filter: alpha(opacity=30); display: block; width: 100%; height: 100%; left: 0px; top: 0px;";
  
  var $target = $("body").find("[data-guide-index]");
  // console.log($target);

  var length = $target.length;
  var currentTarget;

  // 目标信息储存至 target_arr      
  for (var i = 0; i < length; i++) {
    currentTarget = $target.eq(i)[0];

    this.target_arr.push({
      elem: currentTarget,
      index: currentTarget.getAttribute("data-guide-index"),
      pos: this.getTargetPos(currentTarget)
    }); 
  }

  // 重新排序
  this.target_arr.sort(function(a, b) {if (a.index < b.index) {return -1;} if(a.index > b.index) {return 1;}});
  // console.log(this.target_arr);

  // 创建 Step 元素 
  this.createStepHTML(length);

  // 创建 Mask 遮罩
  $("<div/>").addClass("masklayer").attr("style", mask_css).appendTo($("body"));
  $("<button/>").addClass("layer-close").appendTo($("body"))
    .bind("click", function () {
      _this.clearGuide.apply(_this);
    });
  
  // 定位
  this.setStepPos();
  $(window).bind("resize", function () {
    for (var j = 0; j < length; j++) {
      currentTarget = _this.target_arr[j]["elem"];
      _this.target_arr[j]["pos"] = _this.getTargetPos(currentTarget);
    }

    _this.setStepPos();
  });

  // 幻灯片展示
  this.slideShow();
};

Guide.prototype.createStepHTML = function(length) {
  var temp_arr = [];

  for (var i = 0; i < length; i++) {
    temp_arr.push('<div class="guide-step" id="guideStep' + (i + 1) + '"></div>');
  }

  $("body").append(temp_arr.join(""));
};

Guide.prototype.getTargetPos = function(target) {
  var posx, posy, offset;

  offset = $(target).offset();
    posx = offset.left;
    posy = offset.top;
  
  return {x: posx, y: posy};
};

Guide.prototype.setStepPos = function() {
  var _this = this;
  var $step = $(".guide-step");
  var length = this.target_arr.length;
  var stepPos = {}, index;

  $step.each(function (i) {
    index = this.id.replace(/guideStep/, "");

    for (var j = 0; j < length; j++) {
      if (_this.target_arr[j]["index"] == index) {
        stepPos.x = _this.target_arr[j]["pos"].x;
        stepPos.y = _this.target_arr[j]["pos"].y;
      }    
    }

    $(this).css({
      "left": stepPos.x,
      "top": stepPos.y
    });
  });
};

Guide.prototype.slideShow = function() {
  var _this = this;
  var $step = $(".guide-step");
  var length = $step.length;
  var n = 1;

  $step.not(":first").hide();
  this.intervalID = setInterval(_slideShow, 2000);

  function _slideShow() {
    if (n > length -1) {
      _this.clearGuide();
    }

    for (var i = 0; i < length; i++) {
      currentTarget = _this.target_arr[i]["elem"];
      _this.target_arr[i]["pos"] = _this.getTargetPos(currentTarget);
    }

    _this.setStepPos();

    $step.fadeOut();
    $step.eq(n).fadeIn();
    n++;
  }
};

Guide.prototype.clearGuide = function() {
  if (this.intervalID) {
    clearInterval(this.intervalID);
  }

  $(".guide-step").hide();
  $(".masklayer").hide();
  $(".layer-close").hide();
};