У меня есть простая галерея 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;">