Slider automatico in dissolvenza

Ciao a tutti ragazzi, stavo pensando di mettere nel mio forum uno slider automatico in dissolvenza come questo:

Come posso fare? Grazie in anticipo :)

Ciao basterà inserire il codice nel messaggio indice, oppure un iframe.

Saluti
Insane

Un iframe? Cos'è? Come posso inserirlo?
Dove trovo il codice, inoltre?
Quello che ho trovato qui è per forumcommunity, no per forumattivo...

mettilo dove lo vuoi vedere..di solito si mette sulla home del forum

il codice va bene quello ti ho messo i tag giusti fai copia/incolla

Codice:

<style>#slider {width: 600px;
height: 150px;
margin: 1px auto 0;
overflow:visible;
background-color: rgba(255, 255, 255, .15);
border: 5px solid rgba(255, 255, 255, .15);
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
position:relative;
box-shadow: 0 1px 2px #AAA}
#mask {width: 600px;
height: 150px;
overflow:hidden}
#slider:hover {background-color: rgba(255, 255, 255, .8);
border: 5px solid rgba(255, 255, 255, .8)}
#slider:hover #pause {opacity: 1}
#slider:hover ul, #slider:hover #overlay {-moz-animation-play-state:paused;
-webkit-animation-play-state:paused}

#overlay {width: 600px;
height: 150px;
position:absolute;
top: 0;
background-image:url(http://www.pikky.net/uploads/b0b030b3ef7fb61477ca57e7a181a2193d4dc0cb.png);
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
opacity: 0.3;
-moz-animation:overlay-fade 18s infinite;
-webkit-animation:overlay-fade 18s infinite}

#slider ul {width: 600px;
height: 750px;
list-style:none;
padding: 0;
margin: 0;
-webkit-animation:slide 25s infinite linear;
-moz-animation:slide 25s infinite linear;
-ms-animation:slide 25s infinite linear;
-o-animation:slide 25s infinite linear;
animation:slide 25s infinite linear
position:relative;
left: 0}
#slider li {display:inline;
width: 600px;
height: 150px;
margin: 0;
padding: 0;
float:left;
position:relative;
background-image:none;
background-position: 50% 50%;
background-repeat:no-repeat}
#slider li:last-of-type {background-color: #C3C3C3}
#slider li a {display:block;
text-decoration:none}

#slider li span {display:block;
width: 600px;
padding: 8px;
position:absolute;
bottom: 0;
left: 0;
background-color:rgba(54, 54, 54, 0.4);
border-top: 1px solid rgba(0, 0, 0, .2);
text-shadow: 1px 1px 1px #362C30;
pointer-events:none;
text-align:left;
font-family: ubuntu, tahoma, geneva, sans-serif}

#slider ul li span h2 {font-size: 14px;
line-height: 23px;
color: #FFF;
font-weight:normal;
text-align: center}

/*Animazione*/
@-webkit-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -webkit-transform:translatey(0px)}
1% {opacity: 1; -webkit-transform:translatey(0px)}
15% {opacity: 1; -webkit-transform:translatey(0px)}
19% {opacity: 1; -webkit-transform:translatey(0px)}
20% {opacity: 0; -webkit-transform:translatey(0px)}
/*FINE FOTO 1*/

/*FOTO 2*/
21% {opacity: 0; -webkit-transform:translatey(-150px)}
22% {opacity: 1; -webkit-transform:translatey(-150px)}
35% {opacity: 1; -webkit-transform:translatey(-150px)}
39% {opacity: 1; -webkit-transform:translatey(-150px)}
40% {opacity: 0; -webkit-transform:translatey(-150px)}
/*FINE FOTO 2*/

/*FOTO 3*/
41% {opacity: 0; -webkit-transform:translatey(-300px)}
42% {opacity: 1; -webkit-transform:translatey(-300px)}
55% {opacity: 1; -webkit-transform:translatey(-300px)}
59% {opacity: 1; -webkit-transform:translatey(-300px)}
60% {opacity: 0; -webkit-transform:translatey(-300px)}
/*FINE FOTO 3*/

/*FOTO 4*/
61% {opacity: 0; -webkit-transform:translatey(-450px)}
62% {opacity: 1; -webkit-transform:translatey(-450px)}
75% {opacity: 1; -webkit-transform:translatey(-450px)}
79% {opacity: 1; -webkit-transform:translatey(-450px)}
80% {opacity: 0; -webkit-transform:translatey(-450px)}
/*FINE FOTO 4*/

/*FOTO 5*/
81% {opacity: 0; -webkit-transform:translatey(-600px)}
82% {opacity: 1; -webkit-transform:translatey(-600px)}
95% {opacity: 1; -webkit-transform:translatey(-600px)}
99% {opacity: 1; -webkit-transform:translatey(-600px)}
100% {opacity: 0; -webkit-transform:translatey(-600px)}}
@-moz-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -moz-transform:translatey(0px)}
1% {opacity: 1; -moz-transform:translatey(0px)}
15% {opacity: 1; -moz-transform:translatey(0px)}
19% {opacity: 1; -moz-transform:translatey(0px)}
20% {opacity: 0; -moz-transform:translatey(0px)}
/*FINE FOTO 1*/

/*FOTO 2*/
21% {opacity: 0; -moz-transform:translatey(-150px)}
22% {opacity: 1; -moz-transform:translatey(-150px)}
35% {opacity: 1; -moz-transform:translatey(-150px)}
39% {opacity: 1; -moz-transform:translatey(-150px)}
40% {opacity: 0; -moz-transform:translatey(-150px)}
/*FINE FOTO 2*/

/*FOTO 3*/
41% {opacity: 0; -moz-transform:translatey(-300px)}
42% {opacity: 1; -moz-transform:translatey(-300px)}
55% {opacity: 1; -moz-transform:translatey(-300px)}
59% {opacity: 1; -moz-transform:translatey(-300px)}
60% {opacity: 0; -moz-transform:translatey(-300px)}
/*FINE FOTO 3*/

/*FOTO 4*/
61% {opacity: 0; -moz-transform:translatey(-450px)}
62% {opacity: 1; -moz-transform:translatey(-450px)}
75% {opacity: 1; -moz-transform:translatey(-450px)}
79% {opacity: 1; -moz-transform:translatey(-450px)}
80% {opacity: 0; -moz-transform:translatey(-450px)}
/*FINE FOTO 4*/

/*FOTO 5*/
81% {opacity: 0; -moz-transform:translatey(-600px)}
82% {opacity: 1; -moz-transform:translatey(-600px)}
95% {opacity: 1; -moz-transform:translatey(-600px)}
99% {opacity: 1; -moz-transform:translatey(-600px)}
100% {opacity: 0; -moz-transform:translatey(-600px)}}
@-ms-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -ms-transform:translatey(0px)}
1% {opacity: 1; -ms-transform:translatey(0px)}
15% {opacity: 1; -ms-transform:translatey(0px)}
19% {opacity: 1; -ms-transform:translatey(0px)}
20% {opacity: 0; -ms-transform:translatey(0px)}
/*FINE FOTO 1*/

/*FOTO 2*/
21% {opacity: 0; -ms-transform:translatey(-150px)}
22% {opacity: 1; -ms-transform:translatey(-150px)}
35% {opacity: 1; -ms-transform:translatey(-150px)}
39% {opacity: 1; -ms-transform:translatey(-150px)}
40% {opacity: 0; -ms-transform:translatey(-150px)}
/*FINE FOTO 2*/

/*FOTO 3*/
41% {opacity: 0; -ms-transform:translatey(-300px)}
42% {opacity: 1; -ms-transform:translatey(-300px)}
55% {opacity: 1; -ms-transform:translatey(-300px)}
59% {opacity: 1; -ms-transform:translatey(-300px)}
60% {opacity: 0; -ms-transform:translatey(-300px)}
/*FINE FOTO 3*/

/*FOTO 4*/
61% {opacity: 0; -ms-transform:translatey(-450px)}
62% {opacity: 1; -ms-transform:translatey(-450px)}
75% {opacity: 1; -ms-transform:translatey(-450px)}
79% {opacity: 1; -ms-transform:translatey(-450px)}
80% {opacity: 0; -ms-transform:translatey(-450px)}
/*FINE FOTO 4*/

/*FOTO 5*/
81% {opacity: 0; -ms-transform:translatey(-600px)}
82% {opacity: 1; -ms-transform:translatey(-600px)}
95% {opacity: 1; -ms-transform:translatey(-600px)}
99% {opacity: 1; -ms-transform:translatey(-600px)}
100% {opacity: 0; -ms-transform:translatey(-600px)}}
@-o-keyframes slide {/*FOTO 1*/
0% {opacity: 0; -o-transform:translatey(0px)}
1% {opacity: 1; -o-transform:translatey(0px)}
15% {opacity: 1; -o-transform:translatey(0px)}
19% {opacity: 1; -o-transform:translatey(0px)}
20% {opacity: 0; -o-transform:translatey(0px)}
/*FINE FOTO 1*/

/*FOTO 2*/
21% {opacity: 0; -o-transform:translatey(-150px)}
22% {opacity: 1; -o-transform:translatey(-150px)}
35% {opacity: 1; -o-transform:translatey(-150px)}
39% {opacity: 1; -o-transform:translatey(-150px)}
40% {opacity: 0; -o-transform:translatey(-150px)}
/*FINE FOTO 2*/

/*FOTO 3*/
41% {opacity: 0; -o-transform:translatey(-300px)}
42% {opacity: 1; -o-transform:translatey(-300px)}
55% {opacity: 1; -o-transform:translatey(-300px)}
59% {opacity: 1; -o-transform:translatey(-300px)}
60% {opacity: 0; -o-transform:translatey(-300px)}
/*FINE FOTO 3*/

/*FOTO 4*/
61% {opacity: 0; -o-transform:translatey(-450px)}
62% {opacity: 1; -o-transform:translatey(-450px)}
75% {opacity: 1; -o-transform:translatey(-450px)}
79% {opacity: 1; -o-transform:translatey(-450px)}
80% {opacity: 0; -o-transform:translatey(-450px)}
/*FINE FOTO 4*/

/*FOTO 5*/
81% {opacity: 0; -o-transform:translatey(-600px)}
82% {opacity: 1; -o-transform:translatey(-600px)}
95% {opacity: 1; -o-transform:translatey(-600px)}
99% {opacity: 1; -o-transform:translatey(-600px)}
100% {opacity: 0; -o-transform:translatey(-600px)}}
@keyframes slide {/*FOTO 1*/
0% {opacity: 0; transform:translatey(0px)}
1% {opacity: 1; transform:translatey(0px)}
15% {opacity: 1; transform:translatey(0px)}
19% {opacity: 1; transform:translatey(0px)}
20% {opacity: 0; transform:translatey(0px)}
/*FINE FOTO 1*/

/*FOTO 2*/
21% {opacity: 0; transform:translatey(-150px)}
22% {opacity: 1; transform:translatey(-150px)}
35% {opacity: 1; transform:translatey(-150px)}
39% {opacity: 1; transform:translatey(-150px)}
40% {opacity: 0; transform:translatey(-150px)}
/*FINE FOTO 2*/

/*FOTO 3*/
41% {opacity: 0; transform:translatey(-300px)}
42% {opacity: 1; transform:translatey(-300px)}
55% {opacity: 1; transform:translatey(-300px)}
59% {opacity: 1; transform:translatey(-300px)}
60% {opacity: 0; transform:translatey(-300px)}
/*FINE FOTO 3*/

/*FOTO 4*/
61% {opacity: 0; transform:translatey(-450px)}
62% {opacity: 1; transform:translatey(-450px)}
75% {opacity: 1; transform:translatey(-450px)}
79% {opacity: 1; transform:translatey(-450px)}
80% {opacity: 0; transform:translatey(-450px)}
/*FINE FOTO 4*/

/*FOTO 5*/
81% {opacity: 0; transform:translatey(-600px)}
82% {opacity: 1; transform:translatey(-600px)}
95% {opacity: 1; transform:translatey(-600px)}
99% {opacity: 1; transform:translatey(-600px)}
100% {opacity: 0; transform:translatey(-600px)}}

#creditiangelneo {float: right; font-size: 10px; font-style: italic; margin-right: 200px}

</style><div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52604607" title="La formula segreta per aumentare la propria memoria"><img src="http://www.pikky.net/uploads/08c1a5ac94b5b7ae00ed736d65702204890a3a02.png" /></a>
<span><h2>La formula segreta per aumentare la propria memoria</h2></span>
</li>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52018310" title="FIFA 13 - Con il Kinect saremo davvero sul campo? Ecco come!"><img src="http://www.pikky.net/uploads/1daa71d1ff82314439ad988cdcee0a4f567b088f.png" /></a>
<span><h2>FIFA 13 - Con il Kinect saremo davvero sul campo? Ecco come!</h2></span>
</li>
<li> <a href="http://jackforum.forumcommunity.net/?t=52269212" title="I 7 Tipi di Intelligenza"><img src="http://www.pikky.net/uploads/aa0cfba571753819d968058dcea41533cb54e2ae.png" /></a>
<span><h2>I 7 Tipi di Intelligenza</h2></span>
</li>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52551828" title="PES2013 - Creare una playlist con i propri mp3"><img src="http://www.pikky.net/uploads/fed57ac1883e1713b7030f622e0f6ef8e1e07115.png" /></a>

<span><h2>PES2013 - Creare una playlist con i propri mp3</h2></span>
</li>
<li>
<a href="http://jackforum.forumcommunity.net/?t=52310551" title="Il posto ideale per fare l'amore"><img src="http://www.pikky.net/uploads/65fa31a282f5b3a90a9579b11da070dccb07830c.png" /></a>

<span><h2>Il posto ideale per fare l'amore</h2></span>
</li>
</ul>
</div>

<div id="overlay">
</div>
</div>

<br>


<div id="creditiangelneo"><a href="http://jackforum.forumcommunity.net/?t=52988244">Slider automatico con dissolvenza by AngelNeo89 </a></div>

 

tieni in considerazione questo

NOTA: Le immagini devono avere dimensioni 600x150px altrimenti l'effetto non sarà visibile

Ciao, devo solo fare copia-incolla con il codice? :)
Scusa per il disturbo...

si..ti ho messo io il tag del css per il div non serve

Ok grazie mille... sei stato gentilissimo, così come Insane
Chiedo comunque di non chiudere il topic, così se c'è qualche intoppo scrivo qui