如何停止最后一個或第一個圖像的javascript php gallery？

Question

我有一個簡單的jquery和javascript圖片庫，它使用php收集圖像並將它們放在li標簽中。 畫廊的工作原理（幾乎）將在圖像中左右移動，但是我不能讓它們在結尾處停止向右移動，而在圖像的第一行中仍然向左移動，它們只是一直在滾動瀏覽。 我的.js代碼如下所示：

var currentImage = 1;
var numImages = 0;

$(document).ready( function(){

$('.rightbtn').click(function(){
        moveLeft();
});

$('.leftbtn').click(function(){
        moveRight();
});

$('.gallery-li').each(function(){
        numImages++;
});

});

function moveLeft()
{
    if ( currentImage < numImages )
    {
    $('.gallery-ul').animate( { 'marginLeft' : '-=600px' } , 500, 'swing' );
    $currentImage++;
    }
    if ( currentImage > numImages )
    {
    $('.rightbtn').css('display' , 'none');
    }
}

function moveRight()
{
    if ( currentImage = 1 )
    {
    $('.gallery-ul').animate( { 'marginLeft' : '+=600px' } , 500, 'swing' );
    $currentImage--;
    }
    if ( currentImage < 1 )
    {
    $('.leftbtn').css('display' , 'none');
    }
}

我的.php看起來像這樣：

        <ul class="gallery-ul">
        <?php
        $files = glob("pics/interior/*.*");
        for ($i=1; $i<count($files); $i++)
    {
    $num = $files[$i];
    echo '<li class="gallery-li"><img src="'.$num.'" class="gallery-img"/></li>';
    }
        ?>
        </ul>

有人可以告訴我我在做什么錯嗎？

如果您想了解我在說什么，我已經在http://north49builders.com/gallery1.php的服務器上擁有它。

謝謝！

Answer 1

為此更新Jquery代碼。

var currentImage = 1;
var numImages = 0;

$(document).ready( function(){

    $('.rightbtn').click(function(){
            moveLeft();
    });

    $('.leftbtn').click(function(){
            moveRight();
    });

    $('.gallery-li').each(function(){
            numImages++;
    });
});

    function moveLeft()
    {
        if ( (currentImage+1)  == numImages )
        {
            $('.rightbtn').css('display' , 'none');
            $('.leftbtn').css('display' , 'block');
        }else{
            $('.rightbtn').css('display' , 'block');
            $('.leftbtn').css('display' , 'block');
        }
        if ( currentImage < numImages )
        {
            $('.gallery-ul').animate( { 'marginLeft' : '-=600px' } , 500, 'swing' );
            currentImage++;
        }


    }

    function moveRight()
    {

        if ( (currentImage - 1)  == 1 )
        {
            $('.leftbtn').css('display' , 'none');
            $('.rightbtn').css('display' , 'block');
        }else{
            $('.leftbtn').css('display' , 'block');
            $('.rightbtn').css('display' , 'block');
        }

        if ( currentImage <= numImages )
        {
            $('.gallery-ul').animate( { 'marginLeft' : '+=600px' } , 500, 'swing' );
            currentImage--;
        }

    }

並在您的html代碼中添加此

<div class="leftbtn" style="display: none;">