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 块的位置，但无论如何。就像您在第一页中有一个 <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

您必须调整您的代码以使用该示例。但这就是你想要的吗？对不起，我没有写剩下的代码，我有点累了。