javascript - Fullpage.js + figcaption + lazyload 淡入

Question

我是一名初学者，也是一名非专业程序员，正在尝试为我的小型建筑公司制作网页。我遇到了 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

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

您可以在 codepen 中查看完整代码