Funzione per scorrimento automatico slide

[fabio.99999]

Ciao a tutti!


Ho creato una slide con immagini da inserire nella homepage del mio sito, ma visto che conosco da ieri JavaScript mi sono perso eheeheheh
Mi sono rimaste delle lacune con le funzioni e quindi non riesco a crearne una funzionante che possa far scorrere in automatico le immagini orizzontalmente con un effetto di dissolvenza o simile.




Ecco qui la slide in HTML:

<div id="slider">
    <ul>
    <li id="foto1"><a href="link" title=""><img src="http://forum.mrwebmaster.it/jquery/jquery/Logo_T.R.a..png" width="900" height="500" alt=""></a></li>
    <li id="foto2"><a href="link" title=""><img src="foto_cani_327.jpg" width="900" height="500" alt=""></a></li>
    <li id="foto3"><a href="link" title=""><img src="Sfondo Mattoni.jpg" width="900" height="500" alt=""></a></li>
    <li id="foto4"><a href="ling" title=""><img src="tbbt.jpg" width="900" height="500" alt=""></a></li>
    <li id="foto5"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
    <li id="foto6"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
    <li id="foto7"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
    <li id="foto8"><a href="link" title=""><img src="image" width="900" height="500" alt=""></a></li>
    </ul>
</div>
<div id="slider-menu">
    <ul>
        <li><a href="#foto1">Image</a></li>
        <li><a href="#foto2">Image</a></li>
        <li><a href="#foto3">Image</a></li>
        <li><a href="#foto4">Image</a></li>
        <li><a href="#foto5">Image</a></li>
        <li><a href="#foto6">Image</a></li>
        <li><a href="#foto7">Image</a></li>
        <li><a href="#foto8">Image</a></li>
    </ul>

E qui il CSS:

#slider { /*menu slideshow con foto*/
    width: 900px; height: 500px;
    overflow-y: hidden;
    margin: 75px auto 50px auto;
    -moz-box-shadow: 0px 0px 33px #000000;
    -webkit-box-shadow: 0px 0px 33px #000000;
    box-shadow: 0px 0px 33px #000000;
    border:none 5px #000000;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    margin-left: 60px;
}


#slider ul {
    width: 4000px; list-style: none; 
    
}
#slider ul li {
    float: left;
}
    


#slider-menu {
    width: 185px; margin: 0 auto 100px auto; visibility: hidden;
}    
#slider-menu ul {
    list-style: none; 
}
#slider-menu ul li {
    float: left; 
}
#slider-menu ul li a { /* menù pallini neri sotto-foto*/
    display: block; width: 15px; height: 10px;
    border:solid 1px #000000;
    margin: 0 10px;
    background-color: #fff; text-indent: -9999px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-box-shadow:inset 3px 3px 13px #000000;
    -webkit-box-shadow:inset 3px 3px 13px #000000;
    box-shadow:inset 3px 3px 13px #000000;
    text-align: center;
}
#slider-menu ul li a:hover, #slider-menu ul li a.active {
    background-color: #000000;
}

Dovrebbe esserci tutto.. C'è qualcuno che possa darmi una mano a creare sta funzione? Grazie!

[cavicchiandrea]

Ciao Fabio, non conviene riscriverlo (oltretutto è abbastanza complesso) scaricane uno dal web nivo e tra i più famosi ma ne trovi molti altri.

[fabio.99999]

Ciao e grazie per l'info! Allora non sono io che mi perdevo ma è proprio complicato ehehehehh

Non è che mi potresti consigliare un paio di siti in cui scaricare slider con offuscamento e scorrimento automatico e che assomiglino a quello usato da me?

[cavicchiandrea]

http://jquery.malsup.com/cycle/