Basic JavaScript Slideshow without jQuery

一直想实现一个slideshow，不用jquery。但是能力有限，效果都不是很好。直到看到这篇文章。

<style>
/*
essential styles:
these make the slideshow work
*/
#slides{
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing{
    opacity: 1;
    z-index: 2;
}


.controls{
    display: none;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide{
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;

  background-size: cover;
}

/* http://unrestrictedstock.com/wp-content/uploads/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg */
.slide:nth-of-type(1){
    background-color: red;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg');
}

/* http://www.dawghousedesignstudio.com/wp-content/uploads/2010/01/25/free-stock-photos-1.jpg */
.slide:nth-of-type(2){
    background-color: orange;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/free-stock-photos-1.jpg');
}

/* http://www.stockfreeimages.com/static/homepage/waterfall-free-stock-photo-244915.jpg */
.slide:nth-of-type(3){
    background-color: green;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/waterfall-free-stock-photo-244915.jpg');
}

.controls{
  background: #333;
  color: #fff;
  border: none;
  padding: 20px 0px;
  font-size: 20px;
  cursor: pointer;
  border: 2px solid #fff;
  margin: 10px 0px 0px 10px;
  width: 70px;
}

.controls:hover,
.controls:focus{
  background: #eee;
  color: #333;
}

.container{
  position: relative;
}

.buttons{
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  font-size: 0px;
}
</style>

<div class="container">
  <ul id="slides">
    <li class="slide showing"></li>
    <li class="slide"></li>
    <li class="slide"></li>
  </ul>
  <div class="buttons">
    <button class="controls" id="previous">&lt;</button>

    <button class="controls" id="pause">&#10074;&#10074;</button>

    <button class="controls" id="next">&gt;</button>
  </div>
</div>

<script>

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
    controls[i].style.display = 'inline-block';
}

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
    goToSlide(currentSlide+1);
}

function previousSlide(){
    goToSlide(currentSlide-1);
}

function goToSlide(n){
    slides[currentSlide].className = 'slide';
    currentSlide = (n+slides.length)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


var playing = true;
var pauseButton = document.getElementById('pause');

function pauseSlideshow(){
    pauseButton.innerHTML = '&#9658;'; // play character
    playing = false;
    clearInterval(slideInterval);
}

function playSlideshow(){
    pauseButton.innerHTML = '&#10074;&#10074;'; // pause character
    playing = true;
    slideInterval = setInterval(nextSlide,2000);
}

pauseButton.onclick = function(){
    if(playing){ pauseSlideshow(); }
    else{ playSlideshow(); }
};

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function(){
    pauseSlideshow();
    nextSlide();
};
previous.onclick = function(){
    pauseSlideshow();
    previousSlide();
};
</script>