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

Posted 2023-02-25

【中文标题】通过从缩略图或下一个上一个按钮中选择来更改图像

【英文标题】：Change image by selecting from thumbnail or next prev buttons

【发布时间】：2017-12-20 09:41:59

【问题描述】：

我正在开发一个图书页面预览网站，该网站通过 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=""  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 ?>" >
            </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");

【参考方案1】：

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

Here分叉修正。

【讨论】：

非常感谢你，它节省了我的时间，我必须学习更多的javaScript