较大图像的下一个和上一个的功能

Question

任何人都可以帮助我为更大的图像添加下一个和上一个的功能

jQuery(function($) {
    $('#thumbs').delegate('img','click', function(){
        var src = this.src.replace('thumb', 'large');
        $("#largeImage").fadeOut(function() {
            this.src = src;
            $(this).fadeIn();
        });
    }); 
});

<div id="page">
    <div id="gallery">
        <div id="panel">
            <img id="largeImage" src="images/image_01_large.jpg" />
        </div>    
        <div id="thumbs">
            <img src="images/image_01_thumb.jpg" alt="1st image description" />
            <img src="images/image_02_thumb.jpg" alt="2nd image description" />
            <img src="images/image_03_thumb.jpg" alt="3rd image description" />
            <img src="images/image_04_thumb.jpg" alt="4th image description" />
            <img src="images/image_05_thumb.jpg" alt="5th image description" />     
        </div>
    </div>
    <a href="#" id="next">Next</a> 
    <br />
    <a href="#" id="prev">Prev</a>
</div>

Answer 1

以下是添加功能的代码。

$(document).ready(function()
{
    function loadSlide(nSlide)
    {
        $('#thumbs img.current').removeClass('current');
        $(nSlide).addClass('current');

        var src = $(nSlide).attr('src').replace('thumb', 'large');
        $("#largeImage").fadeOut(function() 
        {
            this.src = src;
            $(this).fadeIn();
        });
    }

    $('#next').click(function()
    {   
        var cSlide = $('#thumbs img.current');
        if($(cSlide).next('img').length > 0)
            var nSlide = $(cSlide).next('img');
        else
            var nSlide = $('#thumbs img:first');

        loadSlide(nSlide);
    });

    $('#prev').click(function()
    {
        var cSlide = $('#thumbs img.current');  
        if($(cSlide).prev('img').length > 0)
            var nSlide = $(cSlide).prev('img');
        else
            var nSlide = $('#thumbs img:last');

        loadSlide(nSlide);
    });

    $('#thumbs img').click(function(){
        loadSlide(this);
    });

    loadSlide($('#thumbs img:first'));
});