Slideshow a scorrimento automatico v2.0

<div id="slideshow">

<!-- Radio -->
<input checked="checked" type="radio" name="pan" id="pan1">
<input type="radio" name="pan" id="pan2">
<input type="radio" name="pan" id="pan3">
<input type="radio" name="pan" id="pan4">
<input type="radio" name="pan" id="pan5">
<div id="slides">
<div id="mask">
<div class="slide_content">

<div class="pannello" id="p1"> <!-- Pannello 1 -->
<a href="http://voyagerfanclub.forumfree.it/?t=65667047"><img src="http://imageshack.us/a/img811/9715/conosciamogesu.png"></a>
</div>

<div class="pannello" id="p2"> <!-- Pannello 2 -->
<a href="http://voyagerfanclub.forumfree.it/?t=65366356"><img src="http://img838.imageshack.us/img838/2986/silviaemmeintervista.png"></a>
</div>

<div class="pannello" id="p3"> <!-- Pannello 3 -->
<a href="http://voyagerfanclub.forumfree.it/?t=65010506"><img src="http://imageshack.us/a/img94/861/dcfddfcopia.png"></a>
</div>

<div class="pannello" id="p4"> <!-- Pannello 4 -->
<a href="http://www.rai.tv/dl/replaytv/replaytv.html#ch=2&day=2013-02-04&v=176947&vd=2013-02-04&vc=2"><img src="http://img62.imageshack.us/img62/8307/rivedi2.png"></a>
</div>


<div class="pannello" id="p5"> <!-- Pannello 5 -->
<a href="http://voyagerfanclub.forumfree.it/?t=65546148"><img src="http://img845.imageshack.us/img845/5463/magazinecptcopia.png"></a></div></div>
</div>
</div>

<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
<label for="pan5"></label>
</div>

<script type="text/javascript">
//SLIDESHOW A SCORRIMENTO AUTOMATICO
//by bored - http://ffmagazine.forumfree.it/?t=65226584
var slideJRadio = document.getElementById("slideshow").querySelectorAll("input[type="radio"]");
var eSlide = 1;
var slideJTime;
function setSlideTime(){
slideJTime = window.setInterval(function(){
if(eSlide === slideJRadio.length){
eSlide = 0;
}
slideJRadio[eSlide].checked = true;
eSlide++;
}, 8000);
}
setSlideTime();
document.getElementById("slideshow").onmouseover = function(){
window.clearInterval(slideJTime);
}
document.getElementById("slideshow").onmouseout = setSlideTime;
for(var i = 0; i < slideJRadio.length; i++){
slideJRadio[i].onclick=function(){
eSlide = this.id.match(/[0-9]+/) - 1;
}
}
</script>

/* SLIDESHOW A SCORRIMENTO AUTOMATICO - http://ffmagazine.forumfree.it/?t=65226584 */
#slideshow {width: 500px; padding: 10px; margin: 10px auto; text-align: center} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #F7F7F7; padding: 10px; border: 2px solid #EDEDED; border-radius: 1px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .4), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 0 rgba(0, 0, 0, .1)}

.slide_content {position: relative; width: 600%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}

#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}
#pan5:checked ~ #slides .slide_content {margin-left: -400%}

.pannello {width: 16.666666666666668%; float: left; font-family: arial; font-size: 12px; color: #646464; text-shadow: 0 1px 1px rgba(255, 255, 255, .7)}

#active {margin-top: 5px}
#active label {display: inline-block; width: 13px; height: 13px; border-radius: 1em; background: #08111C; border: 0 solid #08111C; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 0 rgba(255, 255, 255, .7), 0 0 0 rgba(0, 0, 0, .1); margin: 5px; cursor: pointer}
#active label:hover {background: #08111C}

#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4),
#pan5:checked ~ #active label:nth-child(5) {background: #FFB31C; box-shadow: inset 0 0 0 2px #FFB31C, 0 0 0 1px rgba(255, 255, 255, .7), 0 0 4px rgba(0, 0, 0, .1)}