带有左右按钮的图片库

Question

我对 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>  

提前致谢！ :)

Answer 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/

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