用wordpress制作一个Javascript幻灯片

Question

我正在学习编码的第一步。我做了一些关于html，css，javascript，php和MySql的课程，现在，我决定继续从练习中学习，同时创建一个WordPress的儿童主题。

事情是，我正在建立一个图像幻灯片。并开始了解如何使其发现：http://www.w3schools.com/w3css/w3css_slideshow.asp。

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

我做了一个帖子类型，并使用高级自定义字段插件创建了一个Repeater字段。这样的代码将在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）在幻灯片的尽头有一个空的幻灯片。它看起来像我有一个空的子字段，但没有，我没有空的子字段。我不知道为什么有一个空的幻灯片。

你有什么建议吗？

谢谢

Answer 1

我认为这个问题是最后收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(); ?> 

请让我知道如果这不能解决你的问题。