Diapoarama automatique qui ne fonctionne pas

Résolu/Fermé

philipf75017 Messages postés 10 Date d'inscription jeudi 6 juin 2019 Statut Membre Dernière intervention 12 juin 2022 - 23 août 2020 à 23:59
philipf75017 Messages postés 10 Date d'inscription jeudi 6 juin 2019 Statut Membre Dernière intervention 12 juin 2022 - 27 août 2020 à 09:54

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

A voir également:

Diapoarama automatique qui ne fonctionne pas
Recherche automatique des chaînes ne fonctionne pas - Guide
Message automatique thunderbird - Guide
Réponse automatique outlook - Guide
Sommaire automatique word - Guide
Gmail libellé automatique - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
24 août 2020 à 00:25

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 )

philipf75017 Messages postés 10 Date d'inscription jeudi 6 juin 2019 Statut Membre Dernière intervention 12 juin 2022
Modifié le 24 août 2020 à 11:54

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"

Réponse 2 / 2

philipf75017 Messages postés 10 Date d'inscription jeudi 6 juin 2019 Statut Membre Dernière intervention 12 juin 2022
27 août 2020 à 09:54

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

Discussions similaires

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

creer sms automatique en cas d'absence

Facebook invite tout seul !

Discussions similaires

Newsletters