0

我有一个简单的 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的服务器上有了这个。

谢谢！

4

1 回答 1

0

将代码更新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;">
于 2013-05-13T07:09:11.520 回答