1

Есть присвоенный класс visible к первому изображению. Как прописать так, чтобы этот класс присваивался следующим элементам при нажатии?

var gnext = document.getElementById('nextPicture');
var gprev = document.getElementById("prevPicture");
var elem0 = document.getElementsByTagName('li')[0];
var elem1 = document.getElementsByTagName('li')[1];
var elem2 = document.getElementsByTagName('li')[2];
var elem3 = document.getElementsByTagName('li')[3];
var elem4 = document.getElementsByTagName('li')[4];
var elem5 = document.getElementsByTagName('li')[5];

var tablica = [elem0, elem1, elem2, elem3, elem4, elem5];

tablica[0].className += " visible";
//var i = 0;
gnext.onclick = function() {
  // var vis = document.getElementsByClassName('visible')[0];
  //onsole.log(vis)
  for (var i = 0; i < 2; i++) {
    tablica[i].className += "visible";
  }

};
<div class="slider">
  <ul>
    <li><img src="images/1.jpeg"></li>
    <li><img src="images/2.jpeg"></li>
    <li><img src="images/3.jpeg"></li>
    <li><img src="images/4.jpeg"></li>
    <li><img src="images/5.jpeg"></li>
    <li><img src="images/6.jpeg"></li>
  </ul>
  <button id="prevPicture">Prev</button>
  <button id="nextPicture"> Next</button>
</div>

2
  • Есть какая-то недосказанность в этом вопросе хмм.... Commented 18 нояб. 2018 в 19:40
  • Есть присвоеный клас 'visible' к первому изображению. Как прописать так, чтобы етот клас присваивался следующим елементам при нажатии?
    – Taras
    Commented 18 нояб. 2018 в 19:45

2 ответа 2

3

var gnext = document.getElementById('nextPicture');
var gprev = document.getElementById("prevPicture");
var elem = document.getElementsByTagName('li');
elem[0].classList.add('visible');
let count = 0;

function _count(direction) {
  if (direction === '_next') {
    if (count == elem.length - 1)
      count = 0;
    else
      count++;
  } else if (direction === '_prev') {
    if (count == 0)
      count = elem.length - 1;
    else
      count--;
  }
  for (let i = 0; i < elem.length; i++) {
    elem[i].classList.remove('visible');
  }
  elem[count].classList.add('visible');
}

gnext.addEventListener('click', function() {
  _count('_next');
})

gprev.addEventListener('click', function() {
  _count('_prev');
})
.visible {
  background: red;
}
<div class="slider">
  <ul>
    <li><img src="images/1.jpeg"></li>
    <li><img src="images/2.jpeg"></li>
    <li><img src="images/3.jpeg"></li>
    <li><img src="images/4.jpeg"></li>
    <li><img src="images/5.jpeg"></li>
    <li><img src="images/6.jpeg"></li>
  </ul>
  <button id="prevPicture">Prev</button>
  <button id="nextPicture"> Next</button>
</div>

0
element.classList.add('visible');

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.