javascript - 通过从缩略图或下一个上一个按钮中选择来更改图像

Question

我正在开发一个书页预览网站，它通过 mysql 数据库从文件服务器获取书籍所有页面图像(缩略图)，单击缩略图将在主 div 上显示该图像，也可以通过单击下一个或上一个按钮来显示从缩略图更改图像并将其显示在主 div 上。

我已经完成获取图像并单击缩略图将在主 div 上显示图像并且按钮也可以工作但是当我通过按钮更改图像时它不显示在主 div 上这是我的问题。我是这个 php 和 javascript 的新手，我遵循了这个 http://jsfiddle.net/Bgj4b/ 中的代码，我已经花了几天时间仍然没有弄清楚请帮助我。

这是我的问题演示:https://jsfiddle.net/Looper/5r6qb5k3/

这是我的实际代码

PHP/HTML

<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

$("#book-list li").click(function(e) {
    var target = e.target;
    var src = target.src;

    $("#showcase-book-img").fadeOut(function() {
        $(this).on('load', function() { 
            $(this).fadeIn(); 
        });

        $(this).attr("src", src);
    });

    $("#book-list li").removeClass("active");
    $(this).addClass("active");
});

$("#left-arrow").click(function(){
    if($("#book-list li.active").next("#book-list li").length>0){
        $("#book-list li.active").next().trigger("click");
    } else {
        $("#book-list li:first").trigger("click");//go to first
    }
    return false;
});

$("#right-arrow").click(function(){
    if($("#book-list li.active").prev("#book-list li").length>0){
        $("#book-list li.active").prev().trigger("click");
    } else {
        $("#book-list li:last").trigger("click");//go to end
    }
    return false;
});

$("#book-list li:first").trigger("click");

Answer 1

这是错误的:您在 li 元素中触发了事件。它必须应用于其图像。

Here fork 修正。