Question

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

在我的网站上，我只有两个＆＃34;页面幻灯片＆＃34; ...基本上是两个完整的窗口div，用于创建页面幻灯片。 我想在第二页幻灯片的背景中添加一个淡入淡出的图片幻灯片以在4个图像之间旋转。我一整天都在寻找幻灯片，我可以将图像指定为＆＃ 34;盖＆＃34; div，但不干扰FullPage。它必须填充div而不是干扰FullPage。

我该怎么做呢？我今天尝试了几个幻灯片，如Cycle和NivoSlider。虽然周期很好，但它并没有覆盖＆＃34;整个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

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

FullPage.js中的Div幻灯片

1 个答案: