javascript - FullPage.js 中的 Div 幻灯片

Question

我使用 FullPage.js 作为我网站的着陆区。 如果你不熟悉，FullPage 在这里: http://alvarotrigo.com/fullPage/

在我的网站上，我只有两个“页面幻灯片”……基本上是两个创建页面幻灯片的完整窗口 div。 我想添加一个淡入淡出的图像幻灯片，以便在第二页幻灯片的背景中旋转说 4 张图像。我整天都在寻找一个幻灯片，我可以在其中指定要“覆盖”的图像"div，但不干扰 FullPage。它必须填充 div 且不干扰 FullPage。

我该怎么做呢？ 我今天尝试了几种幻灯片，例如 Cycle 和 NivoSlider。虽然 Cycle 很好，但它不会“覆盖”整个 div。而且我似乎永远无法让它与 FullPage 一起正常工作。

一定会有答案。 谢谢，请多指教，我是新手。

如果有帮助的话，我正在处理的页面就在这里。 http://mudchallenger.com/fullpage/examples/video-back-test.html

Answer 1

我试着浏览您的页面，但找不到第二页 div block 的位置，但无论如何。就像你有一个 <video></video>在您的第一页中，创建另一个 <div></div>挡在第二页。给它一个像“幻灯片”这样的 ID。根据您想要的幻灯片效果，您必须更改它。但我打算滑出并有效滑出。因此，您需要并排放置两张图片，其中一张设置为隐藏。

<div id="slideshow">
   <img src="" id="prev" />
   <img src="" id="next" style="display:none;" />
</div>

接下来，在您的 JavaScript 中，您只需创建一个包含图像 src 的数组。

 var images = {
 "img1": "LINK TO IMAGE HERE",
 "img2": "ETC.",
 "img3": "",
 "img4": ""
 }

现在您所要做的就是使用计时器来更改图像的来源。在 JavaScript 中，这只是更改图像的 .src。它可能看起来像这样。

 // Timer code here
 function changeImg(i) {
    document.getElementById('prev').src = images[i];
 }

然后使用 CSS3 进行过渡。

在此处查看此链接:CSS 3 slide-in from left transition

您必须调整您的代码以适用于该示例。但那是你想要的吗？抱歉我没有写剩下的代码，我有点累了。