Привет. Сделал простое слайдшоу, но т.к. 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;
}
JAVASCRIPTfunction 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);
}
