Premessa:

-1- Avevo cominciato a studiare Js qualche anno fa poi per forse maggiori mi sono ritrovato a doverne fare a meno

-2- Il codice js che verrà riportato non è stato scritto di mia mano ed è unicamente fonte di studio

Domanda:

Come detto sto cercando di far funzionare una slideshow, inizialmente ho provato a scriverla di sana pianta ma mi sono ritrovato con un codice un poco grossolano ed a tratti mal funzionante, mentre se sfrutto il software edge animate arrivo spesso a dei punti morti (sto cercando di sostituirlo al vecchio flash del quale ero un buon conoscitore)

Alla fine di tutto ho selezionato da un sito una slideshow di mio gradimento, semplice e senza troppi fronzoli e sto cercando di capirne il funzionamento ma una volta che strutturo la pagina HTML non funziona nella maniera più corretta visualizzando erroneamente le immagini fuori dal loro contenitore.

In breve se sapreste spiegarmi dov'è il goffo errore e qualche modo per migliorare lo script (se potete con spiegazione, anche breve ma preferirei ad un secco fai così) ve ne sarei ampiamente grato, a voi un anticipato ringraziamento e i miei più cordiali omaggi al forum tutto.

Francesco M.


codice HTML:
<html><head><title>Base sito</title><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script></head>

function studio_slider() {
contatore = 0;foto_corrente = 0;nav_slider_counter = 0; //questo parametro non lo comprendo...
$('#slideshow').find('img').each(function() {$(this).addClass('slide_' + contatore);contatore++;

});

function home_switch_slide() {if(foto_corrente >= contatore)foto_corrente = 0;else if(foto_corrente < 0)foto_corrente = (contatore-1);

$('.slide_' + foto_corrente).fadeIn(400);

}

function hide_curr_slide() {
$('.slide_' + foto_corrente).stop();$('.slide_' + foto_corrente).fadeOut(900);
} //qui il compilatore mi definisce un incertezza su un possibile errore!? 

function next_slide_slider(jump_to_slide) {hide_curr_slide();if(jump_to_slide == null)foto_corrente++;elsefoto_corrente = jump_to_slide;t_slide=setTimeout(home_switch_slide,50);

}
function prev_slide_slider(jump_to_slide) {hide_curr_slide();


if(jump_to_slide == null)foto_corrente--;
elsefoto_corrente = jump_to_slide;


t_slide=setTimeout(home_switch_slide,50);}
$('.slide_prev').click(function() {
prev_slide_slider();clearInterval(intervalID_slide);//clearInterval(t_slide);intervalID_slide = setInterval(next_slide_slider, 5000);
});
$('.slide_next').click(function() {
next_slide_slider();clearInterval(intervalID_slide);intervalID_slide = setInterval(next_slide_slider, 5000);
});

intervalID_slide = setInterval(next_slide_slider, 5000);} //questa parte dei pulsanti dovrebbe essere tutta ok ...

$(document).ready(function() {
studio_slider();
$('.header_menu li').hover(function () {$('ul:first', this).css('display','block');},function () {$('ul:first', this).css('display','none');
}
);
}); //quest'ultima invece non riesco bene a comprenderla...

</script>

<style type="text/css">body {background:#efefef;padding:5px 0;position:relative;}#contenitore {width:650px;height:750px;padding:0;margin:0 auto;position:relative;border: solid 2px;border-color: rgb(255, 0, 0);}#banner {width:650px;height: 150px;padding: 0;position:relative;border: solid 2px;border-color: rgb(0, 128, 0);z-index:0;}#slideshow_contenitore {width: 650px;height: 150px;position: relative;z-index: 10;}
#central {width:650px;height:450px;padding: 0;z-index: 0;position:relative;border: solid 2px;border-color: blue;}#info {width:150px;height:450px;padding: 0;z-index: 10;position:relative;border: solid 2px;border-color: orange;left:498px;}#footer {width: 650px;height:140px;padding: 0;position:relative;border: solid 2px;border-color: purple;}
</style>

<body>
<div id="contenitore">

<section id="slideshow_contenitore"><div id="slideshow"><a href="www.facebook.com">
<img width="650" height="150" src="http://www.agriturismolabrocca.it/images/logo.png" id="foto0" class="first_slide_img wp-post-image slide_0" /></a><a href="www.facebook.com"><img width="650" height="150" src="http://www.certosa1966.it/Immagini/Header%20squadre/immagini_storiche.png" id="foto1" class="slide_img wp-post-image slide_1" style="display: none" /></a><a href="www.facebook.com"><img width="650" height="150" src="http://www.cigraph.it/sites/default/files/ArchiFacadeProd.gif?1324377545" id="foto2" class="slide_img wp-post-image slide_2" style="display: none" /></a><a href="www.facebook.com"><img width="650" height="150" src="http://www.ripateatina.org/wp-content/uploads/2012/02/Foto0243.jpg" id="foto3" class="slide_img wp-post-image slide_3" style="display: none" /></a></div>

<img src="..." class="slide_prev" alt="prev"><img src="..." class="slide_next" alt="next"></section>

<div id="central">
<div id="info"></div>
</div><div id="footer"></div></div>
</body></html>