Diapoarama automatique qui ne fonctionne pas

Résolu
philipf75017 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -  
philipf75017 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
depuis des heures j'essaie de faire un diaporama automatique. Rien ne marche de tout ce que j'ai essayé.
je vous donne tout le code de ma page.
le diaporama manuel fonctionne correctement. 
<style type="text/css">
#divpresentation { background-color:#FFFFFF;height:7.8%; }
.choixdisplay { text-align:center; font-size:1.3em; }
#divchoix { background-color:#FFFFFF;width:33.33%; float:left; }
.choixmanuel { width:60%; height:2em; line-height:2em; cursor:pointer; vertical-align:center; font-family:verdana;  
	        text-align:center; margin:0 auto; border-radius:1em; background-color:#CECECE;
	        border:0.1em solid; box-shadow:2px 2px 2px 2px black; }
.choixauto { width:65%; height:2em; line-height:2em; cursor:pointer; vertical-align:center; font-family:verdana; 
		text-align:center; margin:0 auto; border-radius:1em; background-color:#CECECE;
		border:0.1em solid; box-shadow:2px 2px 2px 2px black; }
.choixfermer { width:55%; height:2em; line-height:2em; cursor:pointer; vertical-align:center; font-family:verdana; 
		text-align:center; margin:0 auto; border-radius:1em; background-color:#CECECE;
		border:0.1em solid; box-shadow:2px 2px 2px 2px black; }

/* div des diapo manuelles */
#divDiapoManu { text-align:center; display:none; }
.tablemanu { margin-left:auto; margin-right:auto; width:67%; font-weight:bold; font-size:2em; background-color:#FFFFFF; }
.tdmilieu { width:80%; color:brown; }
.photoprevious 	{ cursor:pointer; color:green; font-size:2em; vertical-align:top; }
.photonext { cursor:pointer; color:green; font-size:2em; vertical-align:middle; }
.divdiapos { text-align:center; width:80%; margin-left:auto; margin-right:auto; }
.photosL { width:80%; display:none; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
.photosH { width:50%; display:none; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }
.photosD { width:50%; border:0.1em solid; box-shadow:3px 3px 3px 3px black; }

/* div des diapo automatique */
#divDiapoAuto { width:100%; text-align:center; background-color:yellow; display:none;}


</style>

<script type="text/javascript" >
function divManu(){
	document.getElementById('divDiapoManu').style.display = "inline"; 
	document.getElementById('divDiapoAuto').style.display = "none";
	document.getElementById('choixmanuel').style.background ="#228B22";
	document.getElementById('choixmanuel').style.color ="#FFFFFF";
	document.getElementById('choixauto').style.background ="#CECECE";
	document.getElementById('choixauto').style.color ="black";
}
function divAuto(){
	document.getElementById('divDiapoAuto').style.display = "inline";
	document.getElementById('divDiapoManu').style.display = "none";
	document.getElementById('choixauto').style.background ="#228B22";
	document.getElementById('choixauto').style.color ="#FFFFFF";
	document.getElementById('choixmanuel').style.background ="#CECECE";
	document.getElementById('choixmanuel').style.color ="black";
}
function fermerDiv(){
	document.getElementById('divDiapoManu').style.display = "none";
	document.getElementById('divDiapoAuto').style.display = "none";
	document.getElementById('choixmanuel').style.background ="#CECECE";
	document.getElementById('choixmanuel').style.color ="black";
	document.getElementById('choixauto').style.background ="#CECECE";
	document.getElementById('choixauto').style.color ="black";
}

/* fonction pour diaporama manuel lors du clic sur le bouton ">" */
function next(gen){
	var numero = parseInt(document.gen.zonedebut.value);
	var numerofin = parseInt(document.gen.zonefin.value);
	if (numero < numerofin){
		document.getElementById(+numero).style.display = "none";
		var numero = ++numero ;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
	else if (numero == numerofin){
		document.getElementById(+numero).style.display = "none";
		var numero = 0;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
}
/* fonction pour diaporama manuel lors du clic sur le bouton "<" */
function previous(gen){
	var numero = document.gen.zonedebut.value;
	if (numero > 0){
		document.getElementById(+numero).style.display = "none";
		var numero = --numero ;
		document.gen.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
}
/* fonction pour diaporama automatique */
var chrono = null;
function afficherauto(vueAuto){
	var numero = parseInt(document.vueAuto.zonedebut.value);
	var numerofin = parseInt(document.vueAuto.zonefin.value);
	do {
		document.getElementById(+numero).style.display = "none";
		var numero = ++numero ;
		document.vueAuto.zonedebut.value= +numero;
		document.getElementById(+numero).style.display = "inline";
	}
	while (numero < numerofin);
}
function start(){
	chrono = setInterval(function(){afficherauto(vueAuto)},3000);
}
function stop(){
 	 clearInterval(chrono);
}
</script>

<!--- affichage des boutons pour la sélection de l'affichage --->
<div id="divpresentation">
	<p class="choixdisplay" >Sélectionner le type de diaporama souhaité</p>
	<div id="divchoix">
		<p id="choixmanuel" class="choixmanuel" onclick="divManu();" > Diaporama manuel 	</p>
	</div>
	<div id="divchoix">
		<p id="choixauto" class="choixauto" onclick="divAuto();afficherauto();"> Diaporama Automatique </p>
	</div>
	<div id="divchoix">
		<p id="choixfermer" class="choixfermer" onclick="fermerDiv();" > Fermer </p>
	</div>
</div>
<!---  affichage de la div pour le diaporama manuel --->
<div id="divDiapoManu" > 
	<table class="tablemanu" ><tr>
		<td><span class="photoprevious" onclick="previous(gen);"> <  </span></td>
		<td class="tdmilieu"><span>Diaporama</span></td>
		<td><span class="photonext" onclick="next(gen)"> > </span></td>
	</tr></table>

	<div class="divdiapos">
		<?php
			include ($_SESSION['langue'].'/rencontres/2019_images.php');
		?>
		<br />			
		<span style="font-size:0.8em; font-weight:normal;">crédit photos Birgit Gries & Philippe Fontayne</span>
	</div>
	<FORM name="gen">
		<INPUT type="hidden" name="zonedebut" value="0">
		<INPUT type="hidden" name="zonefin" value="36">
	</FORM>
</div>
<!---  affichage de la div pour le diaporama automatique --->
<div id="divDiapoAuto">
	<div classe="divdiapo">
		<p id="stopauto" class="stopauto" onclick="stop();" > Arrêter </p>
		<?php
			include ($_SESSION['langue'].'/rencontres/2019_images.php');
		?>
	</div>
	<FORM name="vueAuto">
		<INPUT type="text" name="zonedebut" value="0">
		<INPUT type="text" name="zonefin" value="36">
	</FORM>		
</div>


le fichier 2019_images.php contient 37 images 
		<img name="diapo" src="images/rencontres/2019/20190426_195654.jpg" class="photosD" id="0" alt="" />
		<img name="diapo" src="images/rencontres/2019/20190426_195738.jpg" class="photosL" id="1" alt="" />
		<img name="diapo" src="images/rencontres/2019/20190426_200442.jpg" class="photosH" id="2" alt="" />
		<img name="diapo" src="images/rencontres/2019/20190426_201047.jpg" class="photosH" id="3" alt="" />
...


Merci de votre aide

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Bonjour,

Commence par placer quelques console.log dans ton code histoire de voir si tu rentres bien dans tes fonctions et quelles valeurs prennent tes différentes variables.
Vérifie aussi si tu n'as pas d'erreurs indiquées dans la console javascript de ton navigateur ( n'hésite pas à nous en faire une capture écran après avoir cliqué sur ton bouton start )
0
philipf75017 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,
J'ai repris mon code et j'ai fait quelques corrections
j'ai remplacé 
<p id="choixauto" class="choixauto" onclick="divAuto();afficherauto();"> Diaporama Automatique </p>

par 
<p id="choixauto" class="choixauto" onclick="divAuto();start();"> Diaporama Automatique </p>

pour les fonctions j'ai remplacé 
function afficherauto(vueAuto){
 var numero = parseInt(document.vueAuto.zonedebut.value);
 var numerofin = parseInt(document.vueAuto.zonefin.value);
 do {
  document.getElementById(+numero).style.display = "none";
  var numero = ++numero ;
  document.vueAuto.zonedebut.value= +numero;
  document.getElementById(+numero).style.display = "inline";
 }
 while (numero < numerofin);
}
function start(){
 chrono = setInterval(function(){afficherauto(vueAuto)},3000);
}

par 
var chrono = null;

function afficherauto(){
 var numero = parseInt(document.vueAuto.zonedebut.value);
 var numerofin = parseInt(document.vueAuto.zonefin.value);
 do {
alert(numero);
  document.getElementById(+numero).style.display = "none";
  var numero = ++numero ;
  document.vueAuto.zonedebut.value= +numero;
  document.getElementById(+numero).style.display = "inline";
 }
 while (numero =< numerofin);
}
function start(){
alert('start');
 chrono = setInterval(function(){afficherauto()},3000);
}


J'entre bien dans les fonctions start() et afficherauto()
il semble que les problèmes se situent à ces 2 lignes 
document.getElementById(+numero).style.display = "none";
document.getElementById(+numero).style.display = "inline";

le message affiché est " Uncaught Type Error. Cannot read property 'style' of null"
la première photo du fichier ne possède pas de style="display:none"
0
Réponse 2 / 2
philipf75017 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour, quelqu'un pour m'aider SVP

J'ai modifié ma fonction d'affichage mais les images ne s'affichent toujours pas et pourtant j'entre bien dans la fonction 
speed = 2000;
function afficherauto(){
	var numero = parseInt(document.vueAuto.zonedebut.value);
	var numerofin = parseInt(document.vueAuto.zonefin.value);
	numero = ++numero;
	document.vueAuto.zonedebut.value= numero;
	document.getElementById(numero).style.display = "inline";

	objet_timer = setTimeout('afficherauto()',speed);
	document.getElementById(numero).style.display = "none";

}

je remets la partie html 
	<div id="divchoix">
		<p id="choixauto" class="choixauto" onclick="divAuto();afficherauto();"> Diaporama Automatique </p>
	</div>
<div id="divDiapoAuto">
	<div classe="divdiapo">
		<p id="stopauto" class="stopauto" onclick="stop();" > Arrêter </p>
		<?php
			include ($_SESSION['langue'].'/rencontres/2019_images.php');
		?>
	</div>
	<FORM name="vueAuto">
		<INPUT type="text" name="zonedebut" value="0">
		<INPUT type="text" name="zonefin" value="36">
	</FORM>		
</div>

merci
0

Discussions similaires

Outlook: Problème d'envoi de réponse automatique d’absence du bureau
Draz -
Draz -

4 réponses