通过单击向左或向右箭头或从PHP中的缩略图库中选择实际图像来更改主图像

我正在开发一个pdf书籍页面查看器,我的mysql数据库中有许多超过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>