Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2018, 22:47
Аватар для jack3dm
Аспирант
Отправить личное сообщение для jack3dm Посмотреть профиль Найти все сообщения от jack3dm
 
Регистрация: 05.04.2015
Сообщений: 52

Галерея кнопки туда сюда
Всем ку. Проблема при создании кнопок -> и <-
Да, можно взять и добавить jQuery+Lightbox за 2 секунды, но у меня проект и надо всё сделать на VanillaJS.

HTML
<div class="gallery">
	<img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" />
	<img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" />
	<img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" />
	<img class="zoom" src="img/zoom.svg" alt="" /><img src="img/sample.jpg" alt="" />
</div>
<div class="galleryView">
	<div class="bg"></div>
	<div class="photos">
		<img src="img/galleryView/img1.jpg" alt="">
		<img src="img/galleryView/img2.jpg" alt="">
		<img src="img/galleryView/img3.jpg" alt="">
		<img src="img/galleryView/img4.jpg" alt="">
		<div class="controls">
			<div class="prev"><img src="img/arrow.svg" alt=""></div>
			<div class="next"><img src="img/arrow.svg" alt=""></div>
		</div>
	</div>
</div>


Сама кнопка туда работает, а вот назад я хз как сделать.

var imgs = ["img/galleryView/img1.jpg", "img/galleryView/img2.jpg", "img/galleryView/img3.jpg", "img/galleryView/img4.jpg" ];
var imgCurrent = 0;
prev.addEventListener('click', () => {
	imgCurrent = (imgCurrent - 1) % imgs.length;
	console.log(imgCurrent + " - " + imgs[imgCurrent]);
});
next.addEventListener('click', () => {
	imgCurrent = (imgCurrent + 1) % imgs.length;
	console.log(imgCurrent + " - " + imgs[imgCurrent]);
});


При клике направо вот такой оутпут
1 - img/galleryView/img2.jpg
2 - img/galleryView/img3.jpg
3 - img/galleryView/img4.jpg
0 - img/galleryView/img1.jpg
1 - img/galleryView/img2.jpg
2 - img/galleryView/img3.jpg
3 - img/galleryView/img4.jpg
0 - img/galleryView/img1.jpg
1 - img/galleryView/img2.jpg


А налево вот такой: и он неправильный) как его сделать правильным?)
0 - img/galleryView/img1.jpg
-1 - undefined
-2 - undefined
-3 - undefined
0 - img/galleryView/img1.jpg
-1 - undefined
-2 - undefined
-3 - undefined


Может есть более простые примеры?
Вообще то изначально я сделал вот так(кнопка направо, аналог налево такой же только разные цифры) и работало вообще без проблем, но если я покажу этот код то мне скажут что всё плохо, надо проще и по возможности без кучи if else как у меня

if(photos.children[0].style.display === "initial"){
	photos.children[0].style.display = 'none';
	photos.children[1].style.display = 'initial';
}else if(photos.children[1].style.display === "initial"){
	photos.children[1].style.display = 'none';
	photos.children[2].style.display = 'initial';
}else if(photos.children[2].style.display === "initial"){
	photos.children[2].style.display = 'none';
	photos.children[3].style.display = 'initial';
}else if(photos.children[3].style.display === "initial"){
	photos.children[3].style.display = 'none';
	photos.children[0].style.display = 'initial';
}
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2018, 22:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

jack3dm,
а подумать?
imgCurrent = (imgCurrent - 1) % imgs.length;
imgCurrent--;
if(imgCurrent < 0) imgCurrent = imgs.length - 1;
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2018, 22:54
Аватар для jack3dm
Аспирант
Отправить личное сообщение для jack3dm Посмотреть профиль Найти все сообщения от jack3dm
 
Регистрация: 05.04.2015
Сообщений: 52

Сообщение от рони Посмотреть сообщение
jack3dm,
а подумать?
imgCurrent = (imgCurrent - 1) % imgs.length;
imgCurrent--;
if(imgCurrent < 0) imgCurrent = imgs.length - 1;
ёпрст...оболдеть...вот что означает сидеть за компом 16 часов подряд, бошка уже просто не варит...спасибо мой герой
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как зафиксировать кнопки чтобы они оставались на одном месте? mikefromru Элементы интерфейса 5 14.06.2017 23:15
Кнопки с одинаковым box.top Synth Общие вопросы Javascript 20 22.12.2016 22:32
Кнопки вверх/вниз (помогите поправить скрипт) Capoeirista Элементы интерфейса 0 28.12.2015 14:52
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48