0

我正在尝试使用多次导航到同一张幻灯片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和cityY. （事实上​​，地图是演示文稿的轮廓视图，我想放大到特定城市，缩小到地图，然后再放大到另一个城市。）

有任何想法吗？

4

2 回答 2

1

根据文档，您可以以编程方式导航到 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();
  }
});
于 2018-08-12T07:29:25.417 回答
0

好的，作为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的 s:map1和map2）。

于 2018-08-12T07:33:48.257 回答