salve,
è giorni che sto sbattende la testa su questo codice, senza ottenere risultati.
questo è il mio codice:
<!doctype html>
<head lang="it">
<meta charset="UTF-8" />
<title>Gallery ... </title>
<link rel="stylesheet" type="text/css" href="Gallery.css" />
<script type="text/javascript">
var opacity0=0;
var if0=0;
var opacity100=1;
var if100=0
function View(num)
{
var contSrcAlt= new Array();
contSrcAlt[0]=document.getElementById('img'+num).getAttribute(' src');
contSrcAlt[1]=document.getElementById('img'+num).getAttribute(' alt');
document.getElementById("Big2").setAttribute("src" ,contSrcAlt[0]);
document.getElementById("Big2").setAttribute("alt" ,contSrcAlt[1]+' Grande');
document.getElementById("Big2").setAttribute("name ",num);
}
function Next(){
if (document.getElementById('Big2').getAttribute('nam e')==''){
alert('niente da fare');
}
else {
Change0();
var num=parseInt(document.getElementById("Big2").getAt tribute('name'))+1;
var contSrcAlt= new Array();
contSrcAlt[0]=document.getElementById('img'+num).getAttribute(' src');
contSrcAlt[1]=document.getElementById('img'+num).getAttribute(' alt');
document.getElementById("Big2").setAttribute("src" ,contSrcAlt[0]);
document.getElementById("Big2").setAttribute("alt" ,contSrcAlt[1]+' Grande');
document.getElementById("Big2").setAttribute("name ",num);
document.getElementById('Big2').style.opacity="100 ";
window.setInterval(Change100,5);
};

}
function Back(){
if (document.getElementById("Big2").getAttribute('nam e')==""){
}
else {
Change0();
var num=parseInt(document.getElementById("Big2").getAt tribute('name'))+1;
var contSrcAlt= new Array();
contSrcAlt[0]=document.getElementById('img'+num).getAttribute(' src');
contSrcAlt[1]=document.getElementById('img'+num).getAttribute(' alt');
document.getElementById("Big2").setAttribute("src" ,contSrcAlt[0]);
document.getElementById("Big2").setAttribute("alt" ,contSrcAlt[1]+' Grande');
document.getElementById("Big2").setAttribute("name ",num);
Change100();
};
}
function Change0 (){
if0++;
if(if0==12){
alert('siamo arrivati a 12')
clearTimeout(time0);
}else{
document.getElementById('Big2').style.opacity=opac ity100;
opacity100-=0.1;
var time0=setTimeout(Change0(),90000);
}
}
function Change100 (){
...
}
</script>
</head>
<body>
<header>
<img src="img/logo_regione_veneto.png" alt="logo della regione veneto" class="header"/>
<h1 class="header">Olmi San Biagio di Callalta</h1>
<img src="img/logo.png" alt="logo del comune" class="Comune"/>
</header>
<nav>
<ul>
<li>
<div>
<a href="Home_Page.html" title="Home Page" target="_self">Home Page</a>
</div>
</li>
<li>
<div>
<a href="Gallery.html" title="Gallery" target="_self">Gallery</a>
</div>
</li>
</ul>
</nav>
<aside>
<h3>Punti di ritrovo
<br/>
per ragazzi
</h3>
<a href="http://www.olmi.org/" title="Parrocchia di Olmi" target="_blank" />Parrocchia</a>
<br/>
<a href="" title="Anfiteatro" target="_blank" />Anfiteatro</a>
<br/>
<a href="" title="Parco giochi" target="_blank" />Parco giochi</a>
<br/>
</aside>
<section>
<article class="Anteprima" name="ante">
<img src="img/chiesa.jpg" alt="Chiesa" id="img1" onClick="View(1)" /> <!--cambiare il numero all'inerno delle parentesi di view-->
<img src="img/logo_regione_veneto.png" alt="Logo regione" id="img2" onClick="View(2)" />
<img src="img/logo.png" alt="Logo comune" id="img3" onClick="View(3)"/>
</article>
<article id="Big">
<form>
<input type="button" value="<-" name="back" onClick="Back()" />
<img src="" alt="" id="Big2" name=""/>
<input type="button" value="->" name="next" onClick="Next()" />
</form>
</article>
</section>
<footer>
Design by:...
<br/>
email:...
</footer>
</body>
</html>

il problema è questo non riesco a usare il tempo.
l'idea sarebbe quella di passare dall'immagine che sto vedendo ad l'immagine con l'id (img+numero dopo) in mezzo secondo perche in un altro mezzo secondo compaia, sempre con la dissolvenza, l'immagine seguente.
il problema del codice lo vedete.
Io per richiesta devo assolutamente usare il linguaggio javascript.

se riusciste ad aiutarmi a realizzare un codice funzionante ve ne sono grato.

Grazie in anticipo :)