javascript - 用wordpress制作Javascript幻灯片

我正在第一步学习编码。我开设了一些有关html，css，javascript，php和MySql的课程，现在，我决定在构建Wordpress子主题时继续从实践中学习。

关键是我正在构建图像幻灯片。并且开始了解如何实现它，我发现了这一点：http://www.w3schools.com/w3css/w3css_slideshow.asp。

这是一个简单而有用的幻灯片。这太好了！但是，如果我想在Wordpress中实现它，则会遇到一些问题。

我输入了帖子类型，并使用“高级自定义字段”插件创建了“转发器字段”。因此该代码在Wordpress中将类似于以下内容：

<?php get_header(); ?>

<script>

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

</script>


<?php


if( have_rows('image') ):

    while ( have_rows('image') ) : the_row();


                if( get_sub_field('subimage') ) :

            echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
          endif;

    endwhile;


endif;

?>

<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>


</div>

<?php get_footer(); ?>

它几乎完美！但是现在我有两个问题：

1）一旦我加载页面以查看模板。我看到第一个图像覆盖了最后一个图像。我不知道为什么：



2）在幻灯片的末尾有一张空的幻灯片。看来我有一个空子字段，但没有，我没有空子字段。我不知道为什么没有一张空的幻灯片。

你有什么建议吗？

谢谢

最佳答案

我认为问题出在</div>之前的最后一个关闭DIV get_footer()。这是一个简单的html标记错误，导致浏览器失败。您的代码应如下所示：

<?php get_header(); ?>

<script>

var slideIndex = 1;

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}

</script>


<?php

if( have_rows('image') ):
  while ( have_rows('image') ) : the_row();
    if( get_sub_field('subimage') ) :
      echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
    endif;
  endwhile;
endif;

?>

<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>

<script>
  showDivs(slideIndex);
</script>

<?php get_footer(); ?>

如果这不能解决您的问题，请告诉我。

关于javascript - 用wordpress制作Javascript幻灯片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39352244/