Using both setInterval and setTimeout for simple image carousel
How about this: every 3 seconds, you hide the previous image and show the next image. This is simple.

Some changes I made:


I prefer .style.opacity = as opposed to setAttribute("style"). This may be personal preference, but it looks cleaner to me because it uses javascript's object access instead of setting it via a string.
You can use a modulus (%) instead of checking if counter === slides.length.




var carousel = document.getElementById("carousel"),
  slides = carousel.getElementsByTagName('li'),
  counter = 0,
  liList = Array.prototype.slice.call(slides);

setInterval(function() {
  slides[counter].style.opacity = 0; // Hide the previous image
  counter = (counter + 1) % slides.length; // Increment counter
  slides[counter].style.opacity = 1; // Show the next image
}, 3000); // setInterval
#carousel {
  padding: 0;
  margin: 0;
  position: relative;
  width: 315px;
  height: 177px;
}
#carousel li {
  opacity: 0;
  list-style: outside none none;
  width: 315px;
  position: absolute;
  background: #fff;
  transition: opacity 1s;
}
&lt;ul id="carousel"&gt;
  &lt;li style="opacity:1;"&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/labyrinth.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet2.jpg" alt="" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;img src="http://pluggedinwebdesign.com/images/FireRing2.jpg" alt="" /&gt;
  &lt;/li&gt;
&lt;/ul&gt;