如何將帶有縮略圖的硬編碼滑塊變成動態滑塊

Question

我有一個帶有 html 硬編碼縮略圖的幻燈片，並使用帶有 javascript 的 onclick 事件來控制幻燈片的上一個和下一個按鈕以及縮略圖的點擊。 我為 wordpress 動態地打開了內容，但是，由於 currentSlide(n) 是硬編碼的，因此我無法使縮略圖 onclick 事件起作用。 我怎樣才能讓我的 currentSlide 索引動態反應？ 這是我的代碼 PHP ：

foreach($page_children as $page_children):
//Get Thumbnails ID from children pages
$children_thumbnail_ID= get_post_thumbnail_id($page_children);
//Get Thumbnail source
$children_thumbnail_image=wp_get_attachment_image_src($children_thumbnail_ID,'thumbnail');?>
<img class="thumbs" src="<?php ech0 $children_thumbnail_image[0];>"onclick="currentSlide(1)">
<?php endforeach; 
  };

Javascript

<script>
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var thumbs = document.getElementsByClassName("thumbs");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < thumbs.length; i++) {
thumbs[i].className = thumbs[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
thumbs[slideIndex-1].className += " active";
}
</script>

我希望它不會太混亂，並感謝您的幫助，我將不勝感激！ 或者也許有另一種方法可以做到這一點？ 基本上我沒有使用插件，因為我需要我的縮略圖在我的標題部分，而我的幻燈片內容在正文中。 此外，我使用子頁面的特色圖像顯示在父頁面的幻燈片中。 有沒有更好的方法來做到這一點？ 我對 wordpress、php 和 javascript 很陌生。

Answer 1

很簡單 。 您唯一需要做的就是在循環中添加一個整數。 這是我為您更改的代碼。

<?php
$i = 0;
foreach ( $page_children as $page_children ):
//Get Thumbnails ID from children pages
    $i ++; // we increase it in the loop and print it on html.
    $children_thumbnail_ID = get_post_thumbnail_id( $page_children );
//Get Thumbnail source
    $children_thumbnail_image = wp_get_attachment_image_src( $children_thumbnail_ID, 'thumbnail' );
    echo '<img class="thumbs" src="' . $children_thumbnail_image[0] . '" onClick="currentSlide(' . $i . ')" />';
endforeach;

Answer 2

好的，我讓它工作了。 我在 onClick 中回顯了整數，並將增量完全放在循環的末尾，現在它正在工作！

$counter = 1;
    foreach($page_children as $children):
    <img class="thumbs" src="<?php echo $children_thumbnail_image[0];?>    
    "onclick="currentSlide(<?php echo $counter;?>)">
<?php $counter ++ ?>
<?php endforeach; 

感謝您的幫助！