用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(); ?> 

請讓我知道如果這不能解決你的問題。