0

W3Schools 和其他来源的代码都没有按照我的网站上应有的方式工作。

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

我不知道为什么它会首先显示所有图像，或者为什么当相同的代码在 W3Schools 上运行良好时，图像会随着每次点击而向下移动。

另一个问题是在 WordPress 上也不起作用的弹出功能。弹出消息的文本已显示。即使鼠标悬停在文本上时光标发生变化，单击任何内容也无济于事。链接： http: //nalawebdev.com/pop-up-doesnt-work

任何有关为什么会发生这种情况的帮助将不胜感激。

4

1 回答 1

0 

$(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>

于 2017-08-24T21:11:25.107 回答