smart-create,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var gal = $(".galnav"),
inp = $('[type="radio"]', gal),
loop = true,
pause = 3000,
timer,
len = inp.length,
indx = len-1;
function go() {
indx = ++indx % len;
inp.eq(indx).prop({checked:true});
loop && (timer = window.setTimeout(go,pause))
}
go();
gal.on("mouseenter", function() {
loop = false;
window.clearTimeout(timer)
}).on("mouseleave", function() {
window.clearTimeout(timer);
loop = true;
go()
})
});
</script>
</head>
<body> <p></p>
<nav class="galnav">
<ul>
<li>
<input type="radio" name="btn" value="one" checked="checked">
<label for="btn"></label>
</li>
<li>
<input type="radio" name="btn" value="two">
<label for="btn"></label>
</li>
<li>
<input type="radio" name="btn" value="fre">
<label for="btn"></label>
</li>
</ul>
</nav>
</body>
</html>