在滚动的FullPage.js上分页更改颜色

FullPage.js是一个基于jQuery的插件，用于创建全屏滚动的网页。它可以将网页内容分成多个屏幕，并通过滚动或导航按钮进行切换。

在FullPage.js上分页更改颜色可以通过以下步骤实现：

引入FullPage.js插件和jQuery库到你的网页中。

<script src="jquery.min.js"></script>
<script src="fullpage.min.js"></script>

创建HTML结构，将需要分页的内容放置在各个section中。

<div id="fullpage">
  <div class="section">第一页内容</div>
  <div class="section">第二页内容</div>
  <div class="section">第三页内容</div>
</div>

初始化FullPage.js插件，并设置相关配置项，包括分页更改颜色的功能。

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColor: ['#f2f2f2', '#e6e6e6', '#cccccc'], // 设置每个section的背景颜色
    afterLoad: function(anchorLink, index) {
      var colors = ['#ff0000', '#00ff00', '#0000ff']; // 定义每个section的颜色
      $('.section').eq(index - 1).css('background-color', colors[index - 1]); // 根据索引设置对应section的背景颜色
    }
  });
});

在上述代码中，sectionsColor数组定义了每个section的背景颜色，afterLoad回调函数在每次切换到新的section时触发，根据当前section的索引设置对应的背景颜色。