通過單擊左或右箭頭或從PHP的縮略圖庫中選擇實際圖像來更改主圖像

Question

我正在開發一個pdf書籍頁面查看器，我的很多數據庫中有100多頁的書籍。 因此，我將書頁提取到縮略圖庫中，如果選擇該圖像，它將在主圖像中添加img src並將其顯示在主圖像div上，效果很好，如果我在主圖像旁邊有左右箭頭按鈕，我單擊這些按鈕，圖像應選擇下一個圖像或上一個圖像。 我試圖了解這個想法，並嘗試使用其他來源，但我無法獲得輸出，請為此提供幫助，我在下面添加了代碼，

的PHP

<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>

<ul class="book-list id="book-list">
   <?php if ($total_page > 0) : ?>
    <?php foreach ($results as $row) : ?>
     <li class="book p-2">
     <span class="page-number"><?php echo $page_num++ ?></span>
     <img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
     </li>
    <?php endforeach ?>
   <?php endif ?>
 </ul>

的JavaScript

<script type="text/javascript">
    var bookPageList = $('#book-list');
    $(bookPageList).click(displayImage);

    function displayImage(e) {
        if (e.target !== e.currentTarget) {
            var target = e.target;
            var src = target.src;
            // console.log(src);
            $('#main-img').attr('src', src);
        }
    }
</script>

Answer 1

我已經通過此鏈接修復了此問題，希望對其他新手有所幫助

通過從縮略圖或下一個上一個按鈕中選擇來更改圖像