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分叉纠正。

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

1 个答案: