Intereting Posts

Как остановить галерею javascript php на последнем или первом изображении?

У меня есть простая галерея 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, если вы хотите посмотреть, о чем я говорю.

Благодаря!

Обновите код 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;">