Простое слайдшоу, работает, но хочу лучше, как?

Question

[Максим Рукомойников]

Привет. Сделал простое слайдшоу, но т.к. javascript только начал изучать скорее всего сделал неоптимально. Задача простая - по таймеру менять фотографию.

HTML

<div class="slide" onmouseover='console.log("1")'>
    <div><img src="img/stend_img1.jpg" alt=""></div>
    <div><img src="img/stend_img2.jpg" alt=""></div>
    <div><img src="img/stend_img3.jpg" alt=""></div>
</div>

CSS

.slide {
	position: absolute;
	top: 183px;
}

.slide div {
	-webkit-transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out;
	-o-transition: 2s ease-in-out;
	transition: 2s ease-in-out;
    width: 916px;
	display: block;
	opacity: 0;
	position: absolute;
	top: 0px;
}

JAVASCRIPT

function slider (){
 var slides = document.querySelectorAll('.slide div');
 var currentSlide = 0;
 slides[currentSlide].style.opacity = 1;

 setInterval(function(){
  slides[currentSlide].style.opacity = 0;
  currentSlide++;
  if ( currentSlide >= slides.length){
    // Способ обнулить счётчик слайдов.
    currentSlide = 0;
  }
 slides[currentSlide].style.opacity = 1;
   }, 2000);
}

Answer 1

[Александр Вульф]

Вы учитесь JavaScript'у, а не jQuery, как тут делают многие. Хвала вам :)

А так, вроде, все ок. Но, в функции slider, я бы в аргументах сделал переменную q, куда бы отсылал class DOM-блока со слайдером.
Т.е.

var slider = function(q){ var slides = document.querySelectorAll(q + ' div'); }
slider('.slider1');
slider('.slider2');

Также я сделал бы это объектно-ориентированным + функцию остановки и убивания слайдера.

Comments

[A K]

Верно подметили, для 2 строчных скриптов подключать jq как-то убыточно. Смотрю многие ответы на тостере, даже для показа/скрытия блока используют jQ

[Александр Вульф]

@Symphony: ага, .show/.hide ведь использовать проще :)

Answer 2

[Петр Петров]

Для простого слайдера все гуд, но slides.length надо засунуть в переменную :)