Здравствуйте. Пытаюсь сделать слайдер на чистом js, суть такова. У меня есть массив с картинками, я нажимаю на кнопку и, очевидно, отображается следующая картинка. Я перебираю картинки через цикл for, но очевидно, цикл перебирает массив и выводит мне последнюю картинку. Как сделать, чтобы выводились картинки по очереди мне ума не хватает.`
var array = ['1.jpg', '2.jpg', '3.png', '4.jpg'],
section = document.getElementById('section'),
next = document.getElementById('next'),
back = document.getElementById('back');
for(var i=0; i < array.length; ++i ){
next.addEventListener('click', function(){
for(var i=0; i < array.length; ++i ){
var number = array[i];
section.innerHTML = "<img src='img/" + number + "'/>";
}
})
}
`
Можно запоминать текущий отображаемый элемент скажем в кастомном атрибуте
Как-то так :
var array = ['1.jpg', '2.jpg', '3.png', '4.jpg'],
section = document.getElementById('section'),
next = document.getElementById('next'),
back = document.getElementById('back');
next.addEventListener('click', function() {
var current = +section.getAttribute('data-current');
current++;
if (current >= array.length) {
current = 0;
}
section.setAttribute('data-current', current);
section.innerHTML = array[current];
});
back.addEventListener('click', function() {
var current = +section.getAttribute('data-current');
current--;
if (current < 0) {
current = array.length - 1;
}
section.setAttribute('data-current', current);
section.innerHTML = array[current];
});
<button id="back">back</button>
<button id="next">next</button>
<br />
<div id="section" data-current="0">1.jpg</div>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Привет! Есть код на NodeJSСуть кода - автоматическая чистка комментариев в вк (удаляет комментарии после определенного времени, если они не набрали...
Друзья, как изменить загрузку HTML файла в gulpjs ? По умолчанию при инициализации gulp watch открываеться index
На сайте есть iframeКак с помощью js можно изменить содержимое или стили этого iframe?