滑子用子弹

Question

我制作了三张照片的滑块。我有两个按钮（下一个和上一个），这部分工作正常。我也想使用3个子弹来选择图像，但是我遇到了一些问题，使子弹按钮与滑块配合使用。我找不到这样做的方法。

任何人都可以帮我这个代码吗？我是javascript的真正初学者。

谢谢。

/**
 * Navegación por botones
 */
var navegar = function () {
	var elemento = document.getElementById('slider').getElementsByTagName('li');
	var pos = 0;
	for (var i=0; i<elemento.length; i++) {
		if (elemento[i].className == "activa") {
			elemento[i].className = "noactiva";
			pos = i;
		}
	}
	/** Pulsar Anterior **/
	if (this.id == "ant" && pos > 0) {
		elemento[pos-1].className = "activa";
	} else if (this.id == "ant") {
		elemento[elemento.length-1].className = "activa";
	} 
	
	/** Pulsar Siguiente **/
	if (this.id == "seg" && pos < elemento.length-1) {
		elemento[pos+1].className = "activa";		
	} else if (this.id == "seg") {
		elemento[0].className = "activa";
	}
	return false;
};

var desplazar = function () {
	var nav = document.querySelectorAll(".nav");
	for (var i=0; i<nav.length; i++) {
		nav[i].onclick = navegar; 
	}
};

window.onload = function (){
	new desplazar();
};

body.slide { background-color:#9c9c9c  }

#slider {display: block; margin: 0 auto;padding: 0;position: relative;width: 50%;min-height: 22.5em; max-height: 22.5em;list-style: none; overflow: hidden;}

#slider li {position: absolute; background: white; float: left; margin: 0 15px 30px; padding: 10px 10px 35px; box-shadow: 0 4px 6px rgba(0,0,0,.3);}

#slider li img { width: 100%;}

#slider .activa { z-index: 1; opacity: 1;}

#slider .noactiva { z-index: 0; opacity: 0;}

.nav { display: inline-block; margin-top: 1.5em; text-decoration: none;}

.botons { text-align: center;}

.button { position: absolute; top: 50%; }

#linknum ul{list-style:none; display:block; text-align:center; }

#linknum ul li{display:inline; margin-right: 3%;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>PracticaFinal</title>  
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="slide.js"></script>
		
</head>
	<ul id="navTop">
    	<li><a href="index.html">Home</a></li>
    	<li><a href="slide.html">Slide</a></li>
     	<li><a href="carta.html">Carta</a></li>
	</ul>
<body class="slide">
	<div id="slide">
		<h1>Galeria d'imatges amb Slide</h1>
		<ul id="slider">
			<li class="activa"><img src="images/imatge1.jpg" alt="img1" /></li>
			<li class="noactiva"><img src="images/imatge2.jpg" alt="img2" /></li>
			<li class="noactiva"><img src="images/imatge3.jpg" alt="img3" /></li>
		</ul>
	<div class="botons">
		<button id="ant" class="nav" >Anterior</button>
		<button id="seg" class="nav" >Següent</button>
		
		<input id="button-1" type="radio" name="radio-set" class="activa" checked="checked">
		<label for="button-1" class="button-label-1"></label>
		<input id="button-2" type="radio" name="radio-set" class="noactiva">
		<label for="button-2" class="button-label-2"></label>
		<input id="button-3" type="radio" name="radio-set" class="noactiva">
		<label for="button-3" class="button-label-3"></label>


	</div>

	</div>
</div> 
</body>