帶有左右按鈕的圖片庫

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

Dunno（如果您仍在尋找解決方案），但是以下是您可以執行的示例。

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/

顯然，它確實很粗糙，可以清除，但是可以工作。 您還必須記住要考慮用戶何時到達列表末尾。 如果沒有下一個或上一個同級，請添加一些子句。