Javascript 带JS和背景位置的上/下/右/左箭头导航

我正在我的网站上寻找这个导航：

我需要一个背景位置导航trought用户点击， 右箭头将背景向右移动到25%或50%的位置，单击向上或向下箭头时也是如此。 我在js是新来的，不知道怎样才能达到和我提到的网站一样的效果

这是到目前为止我的代码，但我无法应用上下箭头导航

<div class="large-12 columns altura-largura">

    <button class="button" id="btn-direita"><i class="fa fa-angle-right"></i></button>
    <button class="button" id="btn-esquerda"><i class="fa fa-angle-left"></i></button>
    <div class="page page-id-240" id="simpleBG" style="background-position: 0% 0px;"></div>

</div>

---

我不知道你在问什么。如果可能的话，请澄清，我希望我现在能说得更清楚，基本上我需要改进我网站上的导航，我不知道如何改进：

“50%0px”<“100%0px”

在javascript中是不正确的，您需要int值来进行适当的检查编辑if，但仍然无法确定如何使用此系统进行向上/向下导航，如果用户单击向上或向下，则需要保存其单击。如果他首先单击右侧，则此代码应该类似于单击右侧并继续+=50%

var currentPos = $('#simpleBG').css('background-position');
var elementPositions = currentPos.split(' ');

var x = Number(elementPositions[0].replace(/[^0-9-]/g, ''));
x = (x == 100) ? 0 : x += 50;



$('#btn-direita').click(function(){

$('#simpleBG').css('background-position', function (i, value) {
      var x = parseInt(value, 10);
      return (x == 100 ? 0 : x + 50) + "%" + " 0";
  });

});




var currentPos2 = $('#simpleBG').css('background-position');
var elementPositions2 = currentPos2.split(' ');

var y = Number(elementPositions2[0].replace(/[^0-9-]/g, ''));
y = (y == 100) ? 0 : y -= 50;


$('#btn-esquerda').click(function(){


    $('#simpleBG').css('background-position', function (i, value) {
          var y = parseInt(value, 10);
          return (y == 100 ? 0 : y - 50) + "%" + " 0";
      });

});