Slideshow Example

modelo simples de slideshow

HTML

<div class="slideshow">
      <div class="itens">
        <div class="item active" style="background-color:red"></div>
        <div class="item" style="background-color:blue"></div>
        <div class="item" style="background-color:yellow"></div>
      </div>
      <a href="#" class="prev"> < </a>
      <a href="#" class="next"> > </a>
    </div>

CSS

html{ font-family:"Arial Bold", sans-serif}
    .slideshow { overflow : hidden; }
    .slideshow, .slideshow .itens, .slideshow .item {width:100%; height:300px;}
    .slideshow .item { background-size:cover; display:none; }
      .slideshow .item.active { display:block; }
    .slideshow .prev, .slideshow .next {
      position: absolute;   font-size: 50px;       top:150px;
      margin-top:-25px;     padding:0 20px;        font-weight:bold;
      text-decoration:none;
    }
    .slideshow .prev { left:10px; }
    .slideshow .next { right:10px; }

JavaScript

var fn = function(selector, delay){
	this.slideshow = document.querySelector(selector) || document.querySelector(".slideshow");
	this.delay = delay || 3000;
	this.item = this.slideshow.querySelectorAll(".item");
	this.interval = null;
	this.btnPrev = document.querySelector(".prev");
	this.btnNext = document.querySelector(".next");
	this.init();
};
fn.prototype.active = function(){
	var index = -1;
	for(var i = 0; i< this.item.length;i++){
		if(this.item[i].classList.contains("active"))
			index = i;
	}
	return index;
};
fn.prototype.clearClass = function(){
	for(var i = 0; i< this.item.length; i++)
		this.item[i].classList.remove("active");
};
fn.prototype.prev = function(){
	var index = this.active();
	var prev = index == 0 ? this.item.length - 1 : index - 1;
	this.clearClass();
	this.item[prev].classList.add("active");
	this.start();
};
fn.prototype.next = function(){
	var index = this.active();
	var next = index == this.item.length - 1 ? 0 : index + 1;
	this.clearClass();
	this.item[next].classList.add("active");
	this.start();
};
fn.prototype.pause = function(){
	clearInterval(this.interval);
}
fn.prototype.start = function(){
	this.pause();
	var fn = this;
	this.interval = setInterval(function(){
  	fn.next();
	},this.delay);
};
fn.prototype.init = function(){
	var test = false, item = this.item, fn = this;
	for(var i = 0; i< item.length; i++)
		if(item[i].classList.contains("active")) test = true;
	if(test == false) 
		this.itens[0].addClass("active");
	this.btnPrev.addEventListener("click", function(){ fn.prev(); },false);
	this.btnNext.addEventListener("click", function(){ fn.next(); },false);
	this.start();
};
window.fn = new fn();