Логика слайдера javascript?

Question

[Артур]

Помогите с логикой такого слайдера. Я получаю коллекцию картинок, считаю их циклом, в каждой итерации добавляю в нужный блок span как иконка-переключатель. Как мне реализовать, чтобы первый span при онклике добавлял дисплей блок первой картинке, второй - второй и тд. Не понимаю как именно считать span'ы.

window.onload = function slider () {
	var img = document.querySelectorAll('#gallery-item img');
	var wrapSpan = document.getElementById('wrap-span');
	for(var i = 0; i < img.length; i++) {
		var addSpan = document.createElement('span');
		addSpan.classList.add('gallery-span-style');
		wrapSpan.appendChild(addSpan);
	};
};

ссылка на картинку слайдера
https://drive.google.com/open?id=0B8TNywqvIuUVRDZI...

Answer 1

[Andrey Perov]

при клике брать index span, и подставлять img[index] добавлять display: block как то так

Comments

[Артур]

как получить index?

[Andrey Perov]

Артур Кудаев например так у массива https://developer.mozilla.org/ru/docs/Web/JavaScri... сейчас скину пример

[Артур]

Andrey Perov,

window.onload = function slider () {
	var img = document.querySelectorAll('#gallery-item img');
	var wrapSpan = document.getElementById('wrap-span');
	for(var i = 0; i < img.length; i++) {
		var addSpan = document.createElement('span');
		addSpan.classList.add('gallery-span-style');
		wrapSpan.appendChild(addSpan);
	};
	var listSpan = document.getElementsByClassName('gallery-span-style');
	for(var i = 0; i < listSpan.length; i++) {
		var index = listSpan[i];
		listSpan[i].onclick = function () {
			img[index].style.display = 'block';
		}
	}
};

Вот так пробовал, выбивает ошибку - Uncaught TypeError: Cannot read property 'style' of undefined. В переменную index записывает целиком тег, как перевести в номер элемента? А ваша ссылка не рабочая

[Andrey Perov]

Артур Кудаев img[index] что в консоле лог сюда приходит? я сейчас покажу на примере

[Артур]

Andrey Perov,

console.log(index)
<span class="gallery-span-style"></span>

console.log(img[index])
Undefined

[Andrey Perov]

Артур Кудаев

<ul id="wizard">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
    <p>Some random tag</p>
</ul>

function getIndex(element, i) {
    element.addEventListener('click', function() {
       alert('Number ' + i + ' was clicked');
    }, false);
}
[].slice.call(document.getElementById('wizard').children).forEach(getIndex);
// тут вызываем метод массива "slice" в контексте нашего массива из дочерних элементов,
// потом в цикл передаем колбэк нашу функцию

минус то, что обработчиков несколько будет

Посмотрите как тут и сделайте на своем примере, можно по лучше сделать через indexOf()

[Артур]

Andrey Perov, индекс получаю, спасибо. Осталось разобраться в остальном, как в этом случае добавлять остальным display = none, не онкликнутым картинкам

[Артур]

window.onload = function slider () {
	var img = document.querySelectorAll('#gallery-item img');
	var wrapSpan = document.getElementById('wrap-span');
	var index = 0;
	img[index].style.display = 'block';
	for(var i = 0; i < img.length; i++) {
		var addSpan = document.createElement('span');
		addSpan.classList.add('gallery-span-style');
		wrapSpan.appendChild(addSpan);
	};
	var listSpan = document.getElementsByClassName('gallery-span-style');

	function getIndex(element, i) {
    element.addEventListener('click', function() {
       index = i;
       console.log(index)
       for (var j = 0; j < img.length; j++) {
       	img[j].style.display = 'none';
       }
       img[index].style.display = 'block';
    }, false);
}
[].slice.call(document.getElementById('wrap-span').children).forEach(getIndex);

};

Вроде работает, боюсь дыхнуть над ним хД)) спасибо большое))

[Andrey Perov]

Артур Кудаев, легко) просто всем li добавлять display none, а на кликнутый элемент this добавлять display: block или что у вас там, по событию клика все

[Артур]

Andrey Perov, да, я так и сделал циклом)