slideshow (v3)

pure js (vanilla js) slideshow without fucking jquery

by slawe

HTML

<div id="show">
	<div id="slideHolder">
        <img src="http://www.castlethorn.ie/content/images/sized/7-800x250.jpg"/>
		<img src="http://ccii.org.nz/wp-content/uploads/2013/01/Valley-800x250.jpg"/>
		<img src="http://www.oceancityhilton.com/images/oc/ocPier_800x250.jpg"/>
        <img src="http://www.kambodscha.don-kong.com/wp-content/uploads/2014/01/Kep-800x250.jpg"/>
		<img src="http://www.boardwalkbeachresort.com/wp-content/sdaolpu/2012/06/beachcam-header-800x250.jpg"/>
	</div>
</div>

CSS

#show{
width:800px;
height:250px;
border:8px solid #E9E9E9;
margin:5px auto;
overflow:hidden;
box-shadow:2px 2px 5px #514F4F;
}
#slideHolder{
width:3200px;
position:relative;
}
#slideHolder img{
float:left;
}

JavaScript

var show={};
show.duration = 5000; // Delay between each slides
show.speed = 5; // slide speed [should be even multiples of 5]
show.width = 800; // slide width [should be even number]


function slider(val){
  document.getElementById('slideHolder').style.marginLeft=val+'px';
  if(Math.abs(val)%show.width > 0){
    val= val-show.speed;
    document.getElementById('slideHolder').style.marginLeft=val+'px';
	setTimeout('slider('+val+')',1);
  }else{
    if(Math.abs(val)==(show.width*3)){
	  setTimeout('revrert('+val+')',show.duration);
	}else{
	  val= val-show.speed; 
	  setTimeout('slider('+val+')',show.duration);
    }
  }
}

function revrert(val){
  if(Math.abs(val)!=0){
     val= val+(show.speed*2);
     document.getElementById('slideHolder').style.marginLeft=val+'px';
	 setTimeout('revrert('+val+')',1);
  }else{initSlider();}
}

function initSlider(){
  setTimeout('slider('+(-5)+')',show.duration);
}

window.onload = function(){
  initSlider();
}