0

我正在使用 ascensor.js 插件滚动浏览网格上的内容部分。当用户滚动鼠标滚轮时，我试图按顺序逐步浏览每个部分。似乎使用这些设置应该可以做到这一点，而且我认为我已经在更早的迭代中完成了一次；但我似乎无法再次完成这项工作。诚然，它可能是一个不同的插件。

Ascensor 主页： http: //kirkas.ch/ascensor/#Home Ascensor 在 GitHub：https ://github.com/kirkas/Ascensor.js

我已经在一个数组中定义了我的部分的位置。

  var ascensor = $('#grid').ascensor({ direction: [[0,0],[1,0],[1,1],[1,2],[1,3],[2,0],[2,1],[2,2],[3,0],[3,1],[4,0]] });
  var ascensorInstance = $('#grid').data('ascensor');

  $(".links li").click(function(event, index) {
        ascensorInstance.scrollToFloor($(this).index());
  });

  $(".links li:eq("+ ascensor.data("current-floor") +")").addClass("selected");
    ascensor.on("scrollStart", function(event, floor){
        $(".links li").removeClass("selected");
        $(".links li:eq("+floor.to+")").addClass("selected");
  });

  $(".prev").click(function() {
        ascensorInstance.prev();
  });

  $(".next").click(function() {
        ascensorInstance.next();
    });

  $(".direction").click(function() {
        ascensorInstance.scrollToDirection($(this).data("direction"));
    });

...这些是我在插件中的变量：

 var defaults = {
    ascensorFloorName: false,
    childType: 'section',
    windowsOn: 0,
    direction: 'chocolate',
    loop: 'increment-x',
    width: '100%',
    height: '100%',
    time: 500,
    easing: 'linear',
    keyNavigation: true,
    queued: false,
    jump: true,
    ready: false,
    swipeNavigation: 'mobile-only',
    swipeVelocity: 0.7,
    wheelNavigation: true,
    wheelNavigationDelay: 40,
  };

这是我的 HTML。目前，我只能垂直滚动第一张幻灯片（[0,0]、[1,0]、[2,0]...）。

<div id="home-grid">
    <section id="1a" class="active floor floor-1"></section>
    <section id="2a" class="floor floor-2"></section>
    <section id="2b" class="floor floor-3"></section>
    <section id="2c" class="floor floor-4"></section>
    <section id="2d" class="floor floor-5"></section>
    <section id="3a" class="floor floor-6"></section>
    <section id="3b" class="floor floor-7"></section>
    <section id="3c" class="floor floor-8"></section>
    <section id="4a" class="floor floor-9"></section>
    <section id="4b" class="floor floor-10"></section>
    <section id="5a" class="floor floor-11"></section>
</div>
4

0 回答 0