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>

现在我遇到了两个小问题，我无法继续下去，因为我对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淡入

1 个答案: