Форум

sendik · #1 (**permalink**) 27.02.2017, 03:12

С превьюшками под слайдером такая проблема: когда доходит до конца слайдера - две следующие не показывает. В чем ошибка понимаю: в массиве больше нет картинок, нечего показывать. Не понимаю, как исправить. Может, у кого есть идеи?
HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slider</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="mainPreview">
		<img src="img/1.jpg" class="imgPrv" onclick="openSlider(0)">
		<img src="img/2.jpg" class="imgPrv" onclick="openSlider(1)">
		<img src="img/3.jpg" class="imgPrv" onclick="openSlider(2)">
		<img src="img/4.jpg" class="imgPrv" onclick="openSlider(3)">
		<img src="img/5.jpg" class="imgPrv" onclick="openSlider(4)">
		<img src="img/6.jpg" class="imgPrv" onclick="openSlider(5)">
		<img src="img/7.jpg" class="imgPrv" onclick="openSlider(6)">
		<img src="img/8.jpg" class="imgPrv" onclick="openSlider(7)">
		<img src="img/9.jpg" class="imgPrv" onclick="openSlider(8)">
	</div>
	<div id="modalSlider">
		<span id="close" onclick="document.getElementById('modalSlider').style.display='none'"> &times </span>
		<img class="modalImage" id="img01">
		<div class="previews">
			<img class="prevMini" id="prev1" onclick="plusSlidePrev(-2)"> <!-- -2 -->
			<img class="prevMini" id="prev2" onclick="plusSlidePrev(-1)"> <!-- -1 -->
			<span class="prev3"><img class="prevMini" id="prev3"></span> <!-- 0 -->
			<img class="prevMini" id="prev4" onclick="plusSlidePrev(+1)"> <!-- 1 --> 
			<img class="prevMini" id="prev5" onclick="plusSlidePrev(+2)"> <!-- 2 -->
		</div>
		<span class="prev" onclick="prevSlide(0)">&#10094</span>
		<span class="next" onclick="nextSlide(0)">&#10095</span>
	</div>

	<script src="js.js"></script>
</body>
</html>

JS

var imgMassive = ["img/1.jpg","img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg"],
	index = 0,
	doc = document,
	modal = doc.getElementById('modalSlider'),
	modalImg = doc.getElementById('img01'),
	slides = imgMassive,
	prev1 = doc.getElementById('prev1'),
	prev2 = doc.getElementById('prev2'),
	prev3 = doc.getElementById('prev3'),
	prev4 = doc.getElementById('prev4'),
	prev5 = doc.getElementById('prev5');
function openSlider(funcImg) {
	modal.style.display = 'block';
	modalImg.src = imgMassive[funcImg];
	index += funcImg;	
	prev();
}
function nextSlide(n) {
	index++;
	if (index >= slides.length) {
		index = 0 ;	
	}
	index+=n;
	modalImg.src = imgMassive[index];
	prev();
}
function prevSlide(n) {
	index--;
	if (index < 0) {
		index = slides.length-1;
	}
	index-=n;
	modalImg.src = imgMassive[index];
	prev();
}

function prev() {
	prev1.src = imgMassive[index-2];
	prev2.src = imgMassive[index-1];
	prev3.src = imgMassive[index];
	prev4.src = imgMassive[index+1];
	prev5.src = imgMassive[index+2];


}
function plusSlidePrev(el) {
	switch(el){
		case 1:
		nextSlide(0);
		break;
		case 2:
		nextSlide(1);
		break;
		case -1:
		prevSlide(0);
		break;
		case -2:
		prevSlide(1);
		break;
	}
}

рони · #2 (**permalink**) 27.02.2017, 09:26

sendik, сделайте функции
1 функция устанавливает индекс
2 ф-я изменяет индекс
3 ф-я лимитирует число
4 ф-я устанавливает картинку согласно числу
может логику увидите

sendik · #3 (**permalink**) 27.02.2017, 09:43

Сообщение от рони

sendik, сделайте функции
1 функция устанавливает индекс
2 ф-я изменяет индекс
3 ф-я лимитирует число
4 ф-я устанавливает картинку согласно числу
может логику увидите

не совсем понял. Можете пример показать?

рони · #4 (**permalink**) 27.02.2017, 09:52

Сообщение от sendik

Можете пример показать?

попробуйте осилить
В чем ошибка

рони · #5 (**permalink**) 27.02.2017, 09:58

sendik,
попробуйте освоить addeventlistener вместо onclick

sendik · #6 (**permalink**) 27.02.2017, 10:06

Вы конечно простите за мое нубство. я в js новичек.
Не понимаю функцию, которую вы скинули и не догоняю, как смена присвоения события поможет решить проблему

рони · #7 (**permalink**) 27.02.2017, 10:26

sendik,
addeventlistener это для развития

sendik · #8 (**permalink**) 27.02.2017, 10:28

Понял, спасибо.
Можете еще раз, более доступно объяснить про функции?

рони · #9 (**permalink**) 27.02.2017, 10:59

sendik,

function next() {
  index++;
  index = limit(index);
  show()
}
function prev() {
  index--;
  index = limit(index);
  show()
}

function setIndex(x) {
  index = x;
  index = limit(index);
  show();
}
function addIndex(x) {
  index += x;
  index = limit(index);
  show();
}

function limit(num) {
  if (num >= imgMassive.length) {
    num %= imgMassive.length ;
  }
if (num < 0) {
    num = imgMassive.length - (-num % imgMassive.length) ;
  }
  return num
}
function show()
{
   prev1.src = imgMassive[limit(index-2)];
   prev2.src = imgMassive[limit(index-1)];
   prev3.src = imgMassive[index];
   prev4.src = imgMassive[limit(index+1)];
   prev5.src = imgMassive[limit(index+2)];
   modal.style.display = 'block';
}

Форум

Справочник

Discord чат

Курсы javascript