ho il seguente codice fatto da me con l' aiuto di voi utenti del forum:Il codice contiene dei box per le news che cambiano automaticamente ogni 10 secondi o possono essere cambiati con l' ausilio di alcuni pulsanti sopra le news (vedi notizie principali di Multiplayer.it) ora però vorrei aggiungere un effetto di transizione in jquery molto semplice per aggiungere transizioni alle notizie. Potete aiutarmi a integrarlo con il mio codice? non ci riesco, per ora ho provato con Coin slider, slidorion ed hashslider ma non sono riuscito ad integrarli. Sapete consigliarmi uno slider semplice ma buono e come inserirlo?codice:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #principale1 { background-color: green; width: 501px; height: 400px; margin-top:3px; } #principale2 { background-color: gray; width: 501px; height: 400px; margin-top:3px; } #principale3 { background-color: yellow; width: 501px; height: 400px; margin-top:3px; } #principale4 { background-color: blue; width: 501px; height: 400px; margin-top:3px; } #principale5 { background-color: greenyellow; width: 501px; height: 400px; margin-top:3px; } .lista_notizie { background-color: red; width: 97.8px; height: 75px; float: left; cursor:pointer; font-size:24px; margin-right: 3px; } #pulisci{clear:both;} </style> <script type="text/javascript" language="javascript"> function visualizza(n){ clearInterval(temporizza) var Elem = document.getElementById('principale').getElementsByTagName("div") for(var numDiv=0; numDiv<Elem.length; numDiv++){ if(numDiv==n){ Elem[numDiv].style.display = 'block'; temporizza = setTimeout(function(){avviarotazione(0)},15000) }else{ Elem[numDiv].style.display='none'; } } } var temporizza; var num=0; function avviarotazione(n){ var Elem = document.getElementById('principale').getElementsByTagName("div") for(var numDiv=0; numDiv<Elem.length; numDiv++){ if(numDiv==n){ Elem[numDiv].style.display = 'block'; num++ }else{ Elem[numDiv].style.display='none'; } } var ciclo = (num <= 4) ? num : num=0 temporizza = setTimeout(function(){avviarotazione(ciclo)},10000) } onload=function(){avviarotazione(0)} </script> </head> <body> <div class="lista_notizie" onclick="visualizza(0)" id="left">1</div> <div class="lista_notizie" onclick="visualizza(1)" id="left">2</div> <div class="lista_notizie" onclick="visualizza(2)" id="left">3</div> <div class="lista_notizie" onclick="visualizza(3)" id="left">4</div> <div class="lista_notizie" onclick="visualizza(4)" id="left">5</div> <div id="pulisci"></div> <div id="principale"> <div id="principale1" style="display:none" >div 1</div> <div id="principale2" style="display:none;">div 2</div> <div id="principale3" style="display:none;">div 3</div> <div id="principale4" style="display:none;">div 4</div> <div id="principale5" style="display:none;">div 5</div> </div> </body> </html>
Rispondi quotando
