Fullpage.js + figcaption + lazyload 淡入

Question

我是一名初学者，也是一名 none 专业程序员，正在尝试为我的小型建筑公司制作网页。我遇到了 Fullpage.js，我想我应该试一试。参见 http://codepen.io/nor159/pen/RayPZB。

<section class="section">
<figure class="slide">
  <img data-src="http://placekitten.com/g/400/600">
  <figcaption>Section 1, slide 1/4</figcaption>
</figure>
<figure class="slide">
  <img data-src="http://placekitten.com/g/800/300">
  <figcaption>Section 1, slide 2/4</figcaption>
</figure>
<figure class="slide">
  <img data-src="http://placekitten.com/g/500/500">
  <figcaption>Section 1, slide 3/4</figcaption>
</figure>
<figure class="slide">
  <img data-src="http://placekitten.com/g/1200/400">
  <figcaption>Section 1, slide 4/4</figcaption>
</figure>
</section>

现在我有2个小问题，我无法进一步解决，因为我对css和javascript编码的了解不足：

1) 所有幻灯片的所有图形说明同时可见。是否可以仅使活动的 figcaption 可见？

2) 图片延迟加载不是很流畅。能不能有轻微的淡入淡出效果？

此致，一月

Answer 1

删除下面的行：fixedElements: 'figcaption', - 这是不言自明的，figcaption 元素固定在右下角。
您可以使用 CSS img {display: none;} 预先隐藏所有图像，给第一张图像 style="display: block;" 属性并在 Javascript afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){var loadedSlide = $(this).find('img');loadedSlide.fadeIn();} 中添加一个事件。 Reference

您可以在此codepen

中查看完整代码

Fullpage.js + figcaption + lazyload 淡入

Fullpage.js + figcaption + lazyload fade in

javascript

css

lazy-loading

fullpage.js