如何在最后一个图像或第一个图像处停止javascript php gallery? [英] How do I stop javascript php gallery at last or first image?

问题描述

我有一个简单的jquery和javascript图像库，该库使用php收集图像并将其放在li标签中.画廊(几乎)可以正常工作，并且将在图像中左右移动，但是我无法让它们在结尾处停止向右移动，而在图像的第一处则向左移动，它们只是一直在滚动浏览.我的.js代码如下所示:

I have a simple jquery and javascript image gallery that uses php to gather images and put them in li tags. The gallery works (almost) and will go left and right through the images, but I cannot get them to stop going right at the end and left on the first, they just keep scrolling through nothing. My .js code looks like this:

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看起来像这样:

And my .php looks like this:

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

有人可以告诉我我在做什么错吗?

Can someone PLEASE tell me what I'm doing wrong?

如果您已经在 http://north49builders.com/gallery1.php 的服务器上安装了此文件想看看我在说什么.

I have this already on server at http://north49builders.com/gallery1.php if you want to see what I'm talking about.

谢谢！

推荐答案

将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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！