Ошибка в слайдере
С превьюшками под слайдером такая проблема: когда доходит до конца слайдера - две следующие не показывает. В чем ошибка понимаю: в массиве больше нет картинок, нечего показывать. Не понимаю, как исправить. Может, у кого есть идеи?
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'"> × </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)">❮</span>
<span class="next" onclick="nextSlide(0)">❯</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;
}
}
|
sendik, сделайте функции
1 функция устанавливает индекс 2 ф-я изменяет индекс 3 ф-я лимитирует число 4 ф-я устанавливает картинку согласно числу может логику увидите |
Цитата:
|
Цитата:
http://javascript.ru/forum/misc/6754...tml#post445603 |
sendik,
попробуйте освоить addeventlistener вместо onclick |
Вы конечно простите за мое нубство. я в js новичек.
Не понимаю функцию, которую вы скинули и не догоняю, как смена присвоения события поможет решить проблему |
sendik,
addeventlistener это для развития |
Понял, спасибо.
Можете еще раз, более доступно объяснить про функции? |
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';
}
|
| Часовой пояс GMT +3, время: 15:44. |