<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#container{
width:60%;
height: 35em;
margin:0 auto;
}
#panel{
float:left;
width: 79.45%;
height: 100%;
}
#pic{
margin:0;
width: 100%;
height: 30em;
}
#nav{
text-align: center;
position: relative;
top:-40px;
}
#rd{
margin:0;
}
#left{
float:left;
height:85.5%;
width: 10%;
cursor:pointer;
}
#right{
float:right;
height:85.5%;
width: 10%;
cursor:pointer;
}
#right:hover{background-color: lightgrey;}
#left:hover{background-color: lightgrey;}
</style>
</head>
<body>
<div id="container">
<img id="left" src="leftarrow.png" onclick="previousImage()">
<div id="panel">
<img id="pic" src="0.jpg" >
<div id="nav">
<input type="radio" name="rd" value="0" checked="checked" onclick="shiftByButton(this)"/>
<input type="radio" name="rd" value="1" onclick="shiftByButton(this)" />
<input type="radio" name="rd" value="2" onclick="shiftByButton(this)" />
<input type="radio" name="rd" value="3" onclick="shiftByButton(this)" />
<input type="radio" name="rd" value="4" onclick="shiftByButton(this)" />
<input type="radio" name="rd" value="5" onclick="shiftByButton(this)" />
</div>
</div>
<img id="right" src="rightarrow.png" onclick="nextImage()">
</div>
</body>
<script>
function previousImage(){
var rds = document.getElementsByName("rd");
var prev;
var index;
for(var i = 0;i < rds.length ;i++){
if(rds[i].checked == true && i != 0){
index = Number(i-1);
prev = rds[index];
rds[i].checked = false;
prev.checked = true;
break;
}
else if(rds[i].checked == true && i == 0)
{
index = 5;
rds[0].checked = false;
rds[5].checked = true;
break;
}
}
var pic = document.getElementById("pic");
var picName = index + ".jpg";
pic.setAttribute("src",picName);
}
function shiftByButton(rd){
var src = document.createAttribute("src");
var id = document.createAttribute("id");
var picName = Number(rd.value) + ".jpg";
id.nodeValue = "pic";
src.nodeValue = picName;
var imgNew = document.createElement("img");
imgNew.setAttributeNode(id);
imgNew.setAttributeNode(src);
var imgOld = document.getElementById("pic");
var container = document.getElementById("container");
container.removeChild(imgOld);
container.insertBefore(imgNew,document.getElementById("nav"));
}
function nextImage(){
var rds = document.getElementsByName("rd");
var next;
var index;
for(var i = 0;i < rds.length ;i++){
if(rds[i].checked == true){
index = Number((i+1)%rds.length);
next = rds[index];
rds[i].checked = false;
next.checked = true;
break;
}
}
var pic = document.getElementById("pic");
var picName = index + ".jpg";
pic.setAttribute("src",picName);
}
setInterval(nextImage,3000);
</script>
</html>
