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

Question

我正在开发一个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>

Answer 1

我已在此链接中修复了此问题，希望对其他新手有所帮助

Change image by selecting from thumbnail or next prev buttons