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

Question

我正在开发一个PDF书页查看器，我有许多书籍中有100多页的书籍。因此，我将书页获取到我的缩略图库中，如果选择该图像，它将将IMG SRC添加到主图像中，并在主图像div上显示它，这是完美工作的，在这里，我在主图像旁边有左右左箭头按钮，如果我单击这些按钮，图像应选择下一个图像或上一个图像。我试图获得这个想法，并尝试其他无法获得输出的来源，请帮助我，我添加了我的代码bellow，

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

我已经在此链接中解决了此问题，希望这对其他新手有帮助

通过从缩略图或下一个prev按钮中选择图像