Scriptt pour comptage et défilement nombre d'image [Résolu]

Messages postés
2
Date d'inscription
mercredi 20 janvier 2010
Dernière intervention
25 février 2011
- - Dernière réponse : stff406
Messages postés
2
Date d'inscription
mercredi 20 janvier 2010
Dernière intervention
25 février 2011
- 25 févr. 2011 à 15:31
Bonsoir à tous,

J'aimerais savoir s'il serait possible d'insérer un petit affichage indiquant à quelle numéro d'image on se situe et le nombre total d'image défilant ?
En image ce que je souhaiterais faire :
http://img694.imageshack.us/img694/9193/sanstitreofz.png

J'ai,réutilisé un code déjà existant pour effectuer mon défilement d'image.
Voici le code qui faudrait pouvoir adapter dans la mesure du possible :

Merci d'avance pour votre aide.


<script language="JavaScript">
<!--
var bauto = 0;
var dossier= "";
var numero = 1;
var num = 1;

function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++)

this[i+1] = objet.arguments[i]
}

var nom = new objet ("01.jpg", "02.jpg", "03.jpg" , "04.jpg" , "05.jpg");

function suivante() {
numero += 1;
if (numero nom.length + 1) numero 1;
document.image.src = dossier+nom[numero];
}
function precedente() {
numero -= 1;
if (numero 0) numero nom.length;
document.image.src = dossier+nom[numero];
}
function changer() {
numero += 1;
if (numero nom.length + 1) numero 1;
document.image.src = dossier+nom[numero];
roll=setTimeout("changer()", 4500);
}
function initial() {
window.clearTimeout(roll);
document.image.src = dossier+nom[numero];
}
function auto() {
if (bauto == 0)
{
bauto =1; changer();
document.automat.src = "stop.png";
document.automat.title = "Stop";
}
else
{
bauto =0; initial();
document.automat.src = "doublefleche.png";
document.automat.title = "Auto";
}
}
//-->
</script>
Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
Messages postés
279
Date d'inscription
mercredi 22 septembre 2010
Dernière intervention
8 janvier 2014
3
Merci
Ce script assez maladroit (3 fonctions sont pratiquement identiques) et inutilement compliqué (création d'un objet pour numéroter les images de 1 à n alors qu'un simple tableau d'images numérotées de 0 à n-1 est suffisant) pourrait être utilement modifié en tirant parti du prototype suivant.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Images numérotées</title>
<style type="text/css">
#cnt {display:block;width:400px;height:400px;margin:20px auto;border:1px solid red;}
img {display:block;margin:0 auto;width:300px;height:300px;border:1px solid yellow;}
p {text-align:center;}
</style>
</head>





[javascript:newImg(-1) «]  [javascript:newImg(0) auto]  [javascript:newImg(+1) »]




<script type="text/javascript">
var tab=new Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg"),lgn=tab.length,num=-1,rll=false;
function newImg(d,b){
num=(num-(-d)+lgn)%lgn;
document.getElementById('idm').src=tab[num];
document.getElementById('lgd').innerHTML=(num+1)+" / "+lgn;
if (!b && rll) {auto();return}
if (rll) setTimeout('newImg(1,1)',1000);
}
function auto(){
rll=!rll;
if (rll) document.getElementById('ida').innerHTML="stop";
else document.getElementById('ida').innerHTML="auto";
if (rll) newImg(1,1);
}
newImg(+1);
</script>

</html>

Les images sont contenues dans le tableau tab, elles sont au nombre de lgn (la longueur du tableau) et num désigne l'image en cours d'affichage (initialisée à -1). La variable rll est initialisée à faux.
La fonction newImg change l'image affichée en augmentant de d (comme delta + ou -1) le numéro de l'image (on augmente de -(-d) pour être certain de ne pas concaténer et on travaille sur les restes dans la division par lgn pour avoir toujours un numéro compris entre 0 et num-1). Enfin le booléen b (vrai ou faux) permet de savoir d'où vient l'ordre de changement d'image pour l'arrêter si l'utilisateur clique sur une flèche.

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 106 internautes ce mois-ci

Commenter la réponse de 007Julien
Messages postés
2
Date d'inscription
mercredi 20 janvier 2010
Dernière intervention
25 février 2011
0
Merci
C'est parfait ! En plus de ton code, les explications sont tout à fait claire. J'ai réussi à adapter comme je le souhaitais.

Merci beaucoup.
Commenter la réponse de stff406

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.