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;">

如何在最后或第一张图片停止javascript php gallery？

1 个答案: