This is an old module that I coded in vanilla JS for Westwood College Tutoring Center back when I was a student.

index.html

<div class="tips">
  <ul>
  <li>
    <a id="l0" onclick="settab(0);changeit('pic',0);return false;"><h6 class="regular">tutoring</h6></a>
  </li>
  <li>
    <a id="l1" onclick="settab(1);changeit('pic',1);return false;"><h6 class="regular">discussions</h6></a>
  </li>
	<li>
		<a id="l2" onclick="settab(2);changeit('pic',2);return false;"><h6 class="regular">workshops</h6></a>
	</li>
	</ul>
	
	<div id="panel">
    <a onclick="over(); return false;"><img alt="" src="http://rjlewis.me/client/westwood/assets/tutoring.gif" name="pic" /></a>
	
	</div>
</div>

script.js

//function to move to a specific slide  
	function changeit(imgname,imgsrc){
		"use strict";
		
		clearTimeout(timerID);
		document[imgname].src=tt.imgsrc;
		count=imgsrc;
		moveit();
	}
	
//function to control where the slides link
	function over(){
		"use strict";
		
		switch (whichimg){
			case 0:
				window.location="http://mypath.westwood.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_3_1&url=%2Fwebapps%2Fblackboard%2Fexecute%2FcourseMain%3Fcourse_id%3D_8450_1";
			break;
			case 1:
				window.open("http://learn.westwood.edu/p61378189/");
			break;
			case 2:
				window.location="http://mypath.westwood.edu/bbcswebdav/orgs/WCO-STU-TUTORING/KarenandRJ/officeplace.jpg";
			break;
			default:
				window.location="http://mypath.westwood.edu/webapps/portal/frameset.jsp?tab_tab_group_id=_3_1&url=%2Fwebapps%2Fblackboard%2Fexecute%2FcourseMain%3Fcourse_id%3D_8450_1";
		}
	}	
	
//create image array
//http://mypath.westwood.edu/bbcswebdav/orgs/WCO-STU-TUTORING/KarenandRJ/
	var tt= new Array("http://rjlewis.me/client/westwood/assets/tutoring.gif","http://rjlewis.me/client/westwood/assets/discussion.gif","http://rjlewis.me/client/westwood/assets/workshops.gif");
	var whichimg=0;
	var count=0;
	var tab=0;
	
//function to control tab appearance
	function settab(tab){
		"use strict";
		
		switch (tab){
			case 0:
				document.getElementsByTagName('h6')[1].setAttribute('class','regular');
				document.getElementsByTagName('h6')[2].setAttribute('class','regular');
			break;
			case 1:
				document.getElementsByTagName('h6')[0].setAttribute('class','regular');
				document.getElementsByTagName('h6')[2].setAttribute('class','regular');
			break;
			case 2:
				document.getElementsByTagName('h6')[0].setAttribute('class','regular');
				document.getElementsByTagName('h6')[1].setAttribute('class','regular');
			break;
			default:
				document.getElementsByTagName('h6')[tab].setAttribute("class", "selected");
		}
		document.getElementsByTagName('h6')[tab].setAttribute("class", "selected");
	}
	
//function to auto scroll the slideshow	
	function moveit(){
		"use strict";
//if browser does not support the image object, exit.
		if (!document.images){ 
		return;
		}
		
		document.pic.src=tt[count];
		whichimg=count;
		tab=count;	
		if (count<(tt.length-1)) {
			count++;
		} 
		else { 
			count=0;
		}
//call function every 7 seconds
		settab(tab);  
	}
	
	var timerID=setTimeout(moveit, 7000);

style.css

.tips {
  position: relative;
  width: 400px;
	height: 300px;
	padding: 0;
}
*:first-child+html .tips > ul{
	float: right;
}
.tips ul{
	margin: 0px auto 0px -40px;	
	margin-top: 2px;
}

.tips ul li {
	list-style: none;
	float: left;
	display: inline;
}

.tips ul li h6 {
	position: relative;
	padding: 2px 0 2px 2px;
	width: 82px;
	text-align: center;
	margin: 0 2px 0 0px;
	font: bold 13px "Lucida Grande", Lucida, Verdana, sans-serif;
	float: left;
	display: inline;
	
	border-top-left-radius:.5em .5em; 
	-webkit-border-top-left-radius:.5em .5em; 
	-o-border-top-left-radius:.5em .5em; 
	-moz-border-radius-topleft:.5em .5em; 
	
	border-top-right-radius:.5em .5em; 
	-webkit-border-top-right-radius:.5em .5em; 
	-o-border-top-right-radius:.5em .5em; 
	-moz-border-radius-topright:.5em .5em; 
}

.tips div {
	position: absolute;
	top: 42px;
	width: 100%;
	height: 87%;
	color: #000;
}

.tips div p {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

/* @group links*/

a:link{
	text-decoration: none;	
}

.tips ul li h6:hover {
	position: relative;
	padding: 2px 0 2px 2px;
	width: 82px;
	text-align: center;
	margin: 0 2px 0 0px;
	font: bold 13px "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #fffeff;
	background-color: #5d91c0;
	border: 2px solid #72b3ed;
	float: left;
	display: inline;
}
/* @end */

/* @group tabs */

.regular {
	color: #fffeff;
	background-color: #00457e;
	border: 2px solid #0871bb;
}
.selected{
	color: #fffeff;
	background-color: #5d91c0;
	border: 2px solid #72b3ed;
}
/* @end */

/* @group link area */
#panel {
  margin-top: -18px;
}
/* @end */