Question

W3Schools和其他来源的代码都没有按照我们网站上的方式运行。

例如，我从W3Schools复制了代码，基本上只是将其粘贴到WordPress中。我使用自己的图像并在div周围放置黑色边框以更好地可视化。我也摆脱了按钮，只需将onclick="plusDivs(-1)"函数放在div本身上，所以点击任意位置使其滚动到下一个图像。但除此之外，代码完全相同。这是一个link。

我不知道为什么它显示所有图像开始或为什么图像在每次点击时向下移动，当相同的代码在W3Schools上正常工作时。

另一个问题是popup function，它也无法在WordPress上运行。弹出消息的文本已经显示。当鼠标悬停在文本上时，即使光标发生变化，单击任何内容也不会执行任何操作。链接：http://nalawebdev.com/pop-up-doesnt-work

对于为什么会发生这种情况的任何帮助都将非常感激。

Answer 1

$(document).ready(function() {
  $('#fullpage').fullpage({
    sectionsColors: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
    navigation: true,
    scrollOverflow: false,
    afterRender: function(autoplay) {
      setInterval(function() {
        $.fn.fullpage.moveSection();
      }, 1500);
    }
  });
});

.section {
  font-size: 3em;
  font-family: helvetica, arial;
  color: #333;
  text-align: center;
  position: relative;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/wp-admin/css/jquery.fullPage.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="/wp-admin/js/jquery.easings.min.js"></script>
  <script src="/wp-admin/js/jquery.fullPage.js"></script>
</head>

<body style="background-color:black;">
  <div id="fullpage">
    <div class="section">
      <div id="video-overlay">
        <video id="video-background" loop="" muted="" data-autoplay="" src="http://nalawebdev.com/wp-content/uploads/2017/08/Free-Motion-Background-Golden-Light.mp4">
</video>
        <img id="logo" src="http://nalawebdev.com/wp-content/uploads/2017/08/logowhite.png" />
        <h1>N a l a</h1>
        <h6>Web Design & &nbsp;Development<img id="gif" src="http://nalawebdev.com/wp-content/uploads/2017/08/scrolldown-1.gif" /></h6>
      </div>
    </div>

    <div class="section" style="background-color:black;">
      <div class="slidetest">[ngg_images source="galleries" container_ids="7" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;"
        order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div>
    </div>

    <div class="section" style="background-color:black;">
      <div class="slidetest">[ngg_images source="galleries" container_ids="8" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;"
        order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div>
    </div>

    <div class="section" style="background-color:black;">
      <div class="slidetest">[ngg_images source="galleries" container_ids="9" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;"
        order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div>
    </div>

    <div class="section" style="background-color:black;">
      <div class="slidetest">[ngg_images source="galleries" container_ids="10" display_type="photocrati-nextgen_basic_slideshow" gallery_width="1000" gallery_height="500" cycle_effect="fade" cycle_interval="0" show_thumbnail_link="0" thumbnail_link_text="&#91;Show thumbnails&#93;"
        order_by="sortorder" order_direction="ASC" returns="included" maximum_entity_count="500"]</div>
    </div>
    <div class="section" style="background-color:black;"></div>

  </div>
</body>

</html>

来自小提琴的代码根本不在网站上工作

1 个答案: