Simple JS Slideshow #2

by Matthew Schenker

HTML

<div class="slide">THIS IS TEXT 1</div>
<div class="slide">THIS IS TEXT 2</div>
<div class="slide">THIS IS TEXT 3</div>

CSS

.slide {
	opacity: 0;
}

div {
	position: absolute;
	transition: opacity 3.5s ease-in;
}

JavaScript

var current = 0,
    slides = document.getElementsByTagName("div");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.opacity = 0;
  }
  current = (current != slides.length - 1) ? current + 1 : 0;
  slides[current].style.opacity = 1;
}, 3000);