ho questo codice html con uno script:
codice:
<html>
<head>
<style type="text/css">
.menu {
background-color: green;
width: 500px;
height: 400px;
margin-top: 100px
}
.menu1 {
background-color: gray;
width: 500px;
height: 400px;
margin-top: 100px
}
.menu2 {
background-color: yellow;
width: 500px;
height: 400px;
margin-top: 100px
}
.menu3 {
background-color: blue;
width: 500px;
height: 400px;
margin-top: 100px
}
.menu4 {
background-color: greenyellow;
width: 500px;
height: 400px;
margin-top: 100px
}
.lista_notizie {
background-color: red;
width: 100px;
height: 75px;
margin-left: 1px;
float: left;
}
</style>
<script type="text/javascript" language="javascript">
function visualizza(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none')
// se l'elemento è invisibile
{
document.getElementById(id).style.display = 'block';
// rendi visibile l'elemento; non sulla stessa linea
if (id == 'principale1') {
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale2') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale3') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale4') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale5') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
}
}
else{
document.getElementById(id).style.display = 'block';
}
}
}
</script>
</head>
<body>
<div class="lista_notizie" onclick="visualizza('principale1')"></div>
<div class="lista_notizie" onclick="visualizza('principale2')"></div>
<div class="lista_notizie" onclick="visualizza('principale3')"></div>
<div class="lista_notizie" onclick="visualizza('principale4')"></div>
<div class="lista_notizie" onclick="visualizza('principale5')"></div>
<div class="menu" id="principale1" style="display:block">
</div>
<div class="menu1" id="principale2" style="display:none;">
</div>
Il codice serve a creare un div all' interno del quale mettere alcune notizie per il mio sito e sopra 5 pulsanti per cambiare notizia velocemente, volevo però aggiungere anche un intervallo che faccia scorrere automaticamente dopo un tot di tempo le notizie cosicche' possano essere lette tutte senza cliccare nulla, sono ricorso quindi a setInterval, purtroppo però non so dove metterlo all' interno del codice scritto sopra.
Per semplicita' ecco solamente il codice javascipt:
codice:
function visualizza(id){
if (document.getElementById){
if(document.getElementById(id).style.display == 'none')
// se l'elemento è invisibile
{
document.getElementById(id).style.display = 'block';
// rendi visibile l'elemento; non sulla stessa linea
if (id == 'principale1') {
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale2') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale3') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale4') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale5').style.display = 'none';
}
if (id == 'principale5') {
document.getElementById('principale1').style.display = 'none';
document.getElementById('principale2').style.display = 'none';
document.getElementById('principale3').style.display = 'none';
document.getElementById('principale4').style.display = 'none';
}
}
else{
document.getElementById(id).style.display = 'block';
}
}
}
</script>
ho provato ad inserire setInterval ma non riesco a farlo funzionare, spero che voi mi aiutiate