【问题标题】:Div Slideshow within FullPage.jsFullPage.js 中的 Div 幻灯片
【发布时间】:2014-06-24 01:17:13
【问题描述】:

我使用 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

【问题讨论】:

    标签: javascript jquery css fullpage.js


    【解决方案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

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

    【讨论】:

    • 并且 javascript 代码应该放在 fullpage.js 回调 afterRender 中,以确保它在 fullpage.js 完成对 DOM 结构的更改时运行。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多