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

Signaler
Messages postés
2
Date d'inscription
mercredi 20 janvier 2010
Statut
Membre
Dernière intervention
25 février 2011
-
Messages postés
2
Date d'inscription
mercredi 20 janvier 2010
Statut
Membre
Dernière intervention
25 février 2011
-
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>

2 réponses

Messages postés
276
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
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.
Messages postés
2
Date d'inscription
mercredi 20 janvier 2010
Statut
Membre
Dernière intervention
25 février 2011

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.