带有左右按钮的图片库

Posted 2023-05-09

【中文标题】带有左右按钮的图片库

【英文标题】：Image Gallery with right and left buttons

【发布时间】：2014-02-05 14:17:00

【问题描述】：

我对 jQuery 和 javascript 还是很陌生！

我制作了一个图片库，您可以在其中单击下面的小缩略图，然后它会选择该图片并将其显示在一个更大的框中。

我要添加的是您单击的较大图像两侧的按钮，它会更改为左侧或右侧的图像。问题是，我就是想不通：P

（例如：https://imagizer.imageshack.us/v2/757x654q90/34/t4y1.png）

所以这是点击图片的代码，它会变成你点击的图片：

<script type="text/javascript">
    function changePic(img) 
        $("#gallery_img").hide();
        $("#gallery_img").attr ("src", img.src); 
        $("#gallery_img").fadeIn("slow")                
    
</script>

这是 html 部分（只有图像按钮）：

            <div id="gallery_buttons">
                <img id="right" src="pics/right.png"></img>
                <img id="left" src="pics/left.png"></img>
            </div>  

提前致谢！ :)

【问题讨论】：

有人已经发布了像你这样的例子。这是一个链接***.com/questions/16761868/…我希望这有帮助！

所以我将如何做到这一点是将您的所有缩略图都放在一个列表中。当用户单击缩略图时，会向其添加一个名为“thumbnail-selected”或其他内容的类。然后，当用户单击您的箭头之一时，您从所选缩略图的下一个或上一个兄弟加载图像。添加移动选定的类。希望这是有道理的。有像 tn3gallery.com/?refCode=fe8775 这样的示例库，您可以在其中检查一些代码。

【参考方案1】：

不知道您是否仍在寻找解决方案，但这里有一个示例，您可以做什么。

HTML

<div id="prev">Prev</div>
<div id="next">Next</div>
<ul>
    <li class="thumb"><img src="http://i.imgur.com/CdxLTkH.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/N4MgWLu.png"/></li>
    <li class="thumb selected"><img src="http://i.imgur.com/KJyey9r.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/8nqKP4I.png"/></li>
    <li class="thumb"><img src="http://i.imgur.com/vuvPGHg.png"/></li>
</ul>


<img id="gallery_img" src="#"/>

jQuery

$("li").click(function()

    var img = $(this).find('img').attr('src');
    $("ul").children().removeClass('selected');
    $(this).addClass('selected');
    $("#gallery_img").attr("src", img); 
);


$('#prev').click(function()
    var prev = $(".selected").prev();
    var img = prev.find('img').attr('src');
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected');
    prev.addClass('selected'); 
);

$('#next').click(function()
    var next = $(".selected").next();
    var img = next.find('img').attr('src');
    $("#gallery_img").attr("src", img); 
    $("ul").children().removeClass('selected');
    next.addClass('selected'); 
);

这是 jsfiddle，您可以在其中看到该代码的示例。 http://jsfiddle.net/gdSD2/

显然它真的很粗糙，可以清理，但它可以工作。您还必须记住考虑用户何时到达列表末尾。如果没有下一个或上一个兄弟，添加一些子句。

【讨论】：

我找到了解决方案 :) 但无论如何，谢谢我可以在以后的项目中使用它！