Пытаюсь сделать слайдер на js

328
31 августа 2017, 21:59

Здравствуйте. Пытаюсь сделать слайдер на чистом 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 + "'/>"; 
        } 
    }) 
}

`

Answer 1

Можно запоминать текущий отображаемый элемент скажем в кастомном атрибуте

Как-то так :

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>

READ ALSO
Ошибок нет, но ничего не работает

Ошибок нет, но ничего не работает

Привет! Есть код на NodeJSСуть кода - автоматическая чистка комментариев в вк (удаляет комментарии после определенного времени, если они не набрали...

302
Android 4.0 и javascript

Android 4.0 и javascript

Доброго времени сутокJavascript не хочет работать на версии 4

302
Gulp.js как открыть HTML

Gulp.js как открыть HTML

Друзья, как изменить загрузку HTML файла в gulpjs ? По умолчанию при инициализации gulp watch открываеться index

381
Изменить стили iframe

Изменить стили iframe

На сайте есть iframeКак с помощью js можно изменить содержимое или стили этого iframe?

349