Question

我正尝试使用impress.js导航至同一张幻灯片。

想象一下以下幻灯片：

<div id="impress">
    <div id="map" class="step" data-scale="70">
        <img src="img/foo.jpg" class="map" />
    </div>
    <div id="cityX" class="step" data-x="11000" data-y="12000">
        <img src="img/cityX.jpg" class="pic" />
    </div>
    <!-- XXXXXXX TODO show map again-->

    <div id="cityY" class="step" data-x="12000" data-y="12000">
        <img src="img/cityY.jpg" class="pic" />
    </div>

我的目标是在幻灯片map和cityX的开头以及之间导航。（实际上，地图是演示文稿的轮廓图，我想放大到特定城市，缩小到地图，然后再放大到另一个城市。）

有什么想法吗？

Answer 1

根据documentation，您可以以编程方式导航到JavaScript中的目标幻灯片。

在这种情况下，当幻灯片移动到下一张幻灯片时，您收听了事件。如果当前幻灯片是cityX，请移回幻灯片map

但是，为避免幻灯片在map和cityX永恒之间移动，您必须定义一个map将移至下一个幻灯片ID的队列

var api = impress();
api.init();

const rootElement = document.getElementById( "impress" );
const mapElement = document.getElementById( "map" );
const nextMapSlides = ["cityX", "cityY"];

rootElement.addEventListener( "impress:stepleave", function(event) {
  const currentStep = event.target;
  const nextStep = event.detail.next;

  if (currentStep.id === "cityX") {
    return api.goto(mapElement);
  }

  if (currentStep.id === "map" && nextMapSlides.length) {
    const nextEl = document.getElementById(nextMapSlides[0]);
    api.goto(nextEl);
    // remove from queue
    nextMapSlides.shift();
  }
});

Answer 2

好的，作为基于javascript的解决方案的替代方案，以下对我也适用：

<div id="impress">
    <div id="map1" class="step" data-scale="70" data-x="0" data-y="0">
        <img src="img/foo.jpg" class="map" />
    </div>
    <div id="cityX" class="step" data-x="11000" data-y="12000">
        <img src="img/cityX.jpg" class="pic" />
    </div>
    <div id="map2" class="step" data-scale="70" data-x="0" data-y="0">
        <img src="img/foo.jpg" class="map" />
    </div>

    <div id="cityY" class="step" data-x="12000" data-y="12000">
        <img src="img/cityY.jpg" class="pic" />
    </div>

只需要确保使用data-x和data-y属性并多次复制幻灯片（使用不同的id：map1和{{1} }。

演示文稿序列中的同一张幻灯片多次

2 个答案: