18100 sujets
Si je comprend bien, tu as trois divs, tu en affiches 1, tu attends 3 secondes, puis tu veux en afficher un autre, tu attends trois secondes, puis tu affiches le troisième, tu attends 3 secondes puis tu reviens au premier.
Ca doit tourner en boucle tout le temps, ou s'arrêter une fois qu'on revient sur le premier ?
Ca doit tourner en boucle tout le temps, ou s'arrêter une fois qu'on revient sur le premier ?
Quelques lignes de javascript devraient faire l'affaire.
Code HTML :
Code javascript :
Code HTML :
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>Code javascript :
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var div3 = document.getElementById('div3')
//Je fais "disparaitre" 2 des 3 divs
div1.style.display = 'block'
div2.style.display = 'none'
div3.style.display = 'none'
function affichage(){
if(div1.style.display == 'block'){//Si div 1 est visible, je le rend invisible et je rend div2 visible
div1.style.display = 'none'
div2.style.display = 'block
}
else if(div2.style.display == 'block){//Si div 2 est visible, je le rend invisible et je rend div3 visible
div2.style.display = 'none'
div3.style.display = 'block'
}
else if(div3.style.display == 'block'){//Si div 3 est visible, je le rend invisible et je rend div1 visible
div3.style.display = 'none'
div1.style.display = 'block'
}
setTimeout(3000, affichage) //Je rappelle la fonction d'affichage avec un temps mort de 3000 millisecondes (3 secondes)
}
affichage()//lancement au chargement de la page
Ok pour le code, mais ne tourne pas !
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<SCRIPT LANGUAGE="JavaScript">
var div1 = document.getElementById('div1')
var div2 = document.getElementById('div2')
var div3 = document.getElementById('div3')
//Je fais "disparaitre" 2 des 3 divs
div1.style.display = 'block'
div2.style.display = 'none'
div3.style.display = 'none'
function affichage(){
if(div1.style.display == 'block'){//Si div 1 est visible, je le rend invisible et je rend div2 visible
div1.style.display = 'none'
div2.style.display = 'block'
}
else if(div2.style.display == 'block){//Si div 2 est visible, je le rend invisible et je rend div3 visible
div2.style.display = 'none'
div3.style.display = 'block'
}
else if(div3.style.display == 'block'){//Si div 3 est visible, je le rend invisible et je rend div1 visible
div3.style.display = 'none'
div1.style.display = 'block'
}
setTimeout(3000, affichage) //Je rappelle la fonction d'affichage avec un temps mort de 3000 millisecondes (3 secondes)
}
</SCRIPT>
</head>
<body bgcolor="#957000">
<div>
<p align="center">
<img style="border:solid 5px #552B00;" border="0" src="images/defil2.gif" width="465" height="105">
</div>
<p align="center">
<div id="div1" align="center" style="position:absolute; top:25px; width:100%">
<font color="#4F2700" size="5" face="Comic Sans MS">
Nouvelle Rubrique<br>
Les Radio-Clubs<br>
---<BR>
</div>
<p align="center">
<div id="div2" align="center" style="position:absolute; top:25px; width:100%">
<font color="#4F2700" size="5" face="Comic Sans MS">
***Nouvelle Rubrique<br>
***Les Radio-Clubs<br>
***---<BR>
</div>
<p align="center">
<div id="div3" align="center" style="position:absolute; top:25px; width:100%">
<font color="#4F2700" size="5" face="Comic Sans MS">
---Nouvelle Rubrique<br>
---Les Radio-Clubs<br>
------<BR>
</div>
<SCRIPT LANGUAGE="JavaScript">
affichage()//lancement au chargement de la page
</SCRIPT>
</body>
</html>
Ça m'a l'air un peu compliqué pour pas grand chose tout ça. Il suffit de stocker les elements (div) dans un tableau et d'effectuer une rotation à chaque appel de la fonction affichage().
A mettre tout en bas de la page :
arr[ i ].style.display = i == 0 ? 'block' : 'none'; attention à cette ligne, il faut virer les espaces autour de i (c'est le forum qui déconne).
Modifié par jb_gfx (03 May 2012 - 18:29)
A mettre tout en bas de la page :
var arr = [
document.getElementById('div1'),
document.getElementById('div2'),
document.getElementById('div3')
];
function affichage() {
for (var i = 0; i < arr.length; i++) {
arr[ i ].style.display = i == 0 ? 'block' : 'none';
}
// rotation du tableau
var t = arr.shift();
arr.push(t);
setTimeout(affichage, 3000);
}
affichage();
arr[ i ].style.display = i == 0 ? 'block' : 'none'; attention à cette ligne, il faut virer les espaces autour de i (c'est le forum qui déconne).
Modifié par jb_gfx (03 May 2012 - 18:29)
Bonsoir à toutes et à tous,
voici une solution qui fonctionne, sans passer par un tableau.
Voici le code HTML :
Voici le code CSS :
Et pour terminer, le code Javascript :
Cela a été testé sur MSIE 8.0, Firefox 12.0, Google Chrome 18.0, Apple Safari 5.1.5 et opera 11.62 !
@+
Modifié par Artemus24 (04 May 2012 - 03:14)
voici une solution qui fonctionne, sans passer par un tableau.
Voici le code HTML :
<!DOCTYPE html>
<html lang='fr'>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Boîte Tournante !</title>
<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->
<script type="text/javascript" src="Script.js"></script>
<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->
<link rel="stylesheet" type="text/css" href="Styles.css" />
</head>
<body>
<!-- ==================================== -->
<!-- Les Boîtes à afficher successivement -->
<!-- ==================================== -->
<div id="ailleurs">
<div class="monDiv" id="un"> <h1>Boite un</h1> <p>bla bla bla</p></div>
<div class="monDiv" id="deux"> <h1>Boite deux</h1> <p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="trois"> <h1>Boite trois</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="quatre"><h1>Boite quatre</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="cinq"> <h1>Boite cinq</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="six"> <h1>Boite six</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="sept"> <h1>Boite sept</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="huit"> <h1>Boite huit</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
<div class="monDiv" id="neuf"> <h1>Boite neuf</h1> <p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p>
<p>bla bla bla</p></div>
</div>
</body>
</html>Voici le code CSS :
body {
background-color : grey;
}
/*-------------------------------------------------------*/
/* les spécificités communes à toutes les boites */
/*-------------------------------------------------------*/
#ailleurs {
margin : 0 auto;
}
.monDiv {
display : none;
padding : 10px;
border : 3px solid black;
}
h1 {
text-align : center;
}
/*-------------------------------*/
/* les boites à afficher */
/*-------------------------------*/
#un {
background-color : yellow;
width : 150px;
}
#deux {
background-color : green;
width : 200px;
}
#trois {
background-color : blue;
width : 250px;
}
#quatre {
background-color : red;
width : 300px;
}
#cinq {
background-color : white;
width : 350px;
}
#six {
background-color : pink;
width : 400px;
}
#sept {
background-color : red;
width : 350px;
}
#huit {
background-color : green;
width : 300px;
}
#neuf {
background-color : cyan;
width : 250px;
}Et pour terminer, le code Javascript :
window.onload = function ()
{
Manege.Init(1000);
Manege.Lancer();
};
/********************************/
/* */
/* Le Manège des Boites */
/* */
/********************************/
var Manege = {
delay: null,
time: 0, /* temps en milliseconde */
addr: null, /* adresse de "ailleurs" */
node: null, /* liste des divisions */
prec: 0, /* Boîte précédente */
suiv: 0, /* Boîte suivante */
/*========================*/
/* Initialisation */
/*========================*/
Init: function (temps)
{
this.delay = null;
this.time = parseInt(temps);
this.addr = document.getElementById('ailleurs');
this.node = this.addr.getElementsByTagName('div');
this.prec = 0;
this.suiv = 0;
this.Afficher();
},
/*===============================*/
/* on affiche les boîtes */
/*===============================*/
Afficher: function ()
{
this.node[this.prec].style.display = "none";
this.node[this.suiv].style.display = "block";
/*------------------------------------------------------*/
/* Centrage de la boîte en largeur dans la page */
/*------------------------------------------------------*/
var large = parseInt(this.node[this.suiv].offsetWidth);
var posit = Math.round((screen.availWidth - large) / 2);
this.addr.style.width = large + "px";
this.addr.style.left = posit + "px";
/*--------------------------------------*/
/* On passe à la boîte suivante */
/*--------------------------------------*/
this.prec = this.suiv++;
if (this.suiv >= this.node.length) this.suiv = 0;
},
/*=============================*/
/* Lancement du manège */
/*=============================*/
Lancer: function ()
{
window.clearInterval(this.delay);
this.delay = window.setInterval("Manege.Afficher()", this.time);
},
/*=========================*/
/* Arrêt du manège */
/*=========================*/
Stopper: function ()
{
window.clearInterval(this.delay);
this.delay = null;
}
};Cela a été testé sur MSIE 8.0, Firefox 12.0, Google Chrome 18.0, Apple Safari 5.1.5 et opera 11.62 !
@+
Modifié par Artemus24 (04 May 2012 - 03:14)