Question

我正在寻找我网站上的精确导航： http://fetedelabiere.promo-agency.com/

我需要在用户点击后进行背景位置导航，右箭头将背景移动到右侧的25％或50％位置，单击向上或向下箭头时相同。我是js的新手，无法弄清楚如何产生同样的效果和我提到的网站。

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

var arr = [];

$(document).ready(function() {
  GetMyListData();
  $('#meineList').html(arr.toString());
});

function GetMyListData() {
  var method = "GetListItems";
  var list = "MyList";

  var fieldsToRead = "<ViewFields>" +
    "<FieldRef Name='Title' />" +
    "<FieldRef Name='treo' />" +
    "<FieldRef Name='iz1y' />" +
    "</ViewFields>";

  var query = "<Query>" +
    "<Where>" +
    "<Neq>" +
    "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
    "</Neq>" +
    "</Where>" +
    "<OrderBy>" +
    "<FieldRef Name='Title'/>" +
    "</OrderBy>" +
    "</Query>";

  $().SPServices({
    operation: method,
    async: false,
    listName: list,
    CAMLViewFields: fieldsToRead,
    CAMLQuery: query,
    completefunc: function(xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {

        var name = ($(this).attr("ows_Title"));
        var text = ($(this).attr("ows_treo"));
        var value = ($(this).attr("ows_iz1y"));

        AddRowToTable(name, text, value);
      });
    }
  });
}

function AddRowToTable(name, text, value) {
  arr.push({'name': name, 'text': text, 'value': value});
}

和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>

使用JS和背景位置向上/向下/向右/向左箭头导航

0 个答案: