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

stff406 2 Messages postés mercredi 20 janvier 2010Date d'inscription 25 février 2011 Dernière intervention - 24 févr. 2011 à 18:11 - Dernière réponse : stff406 2 Messages postés mercredi 20 janvier 2010Date d'inscription 25 février 2011 Dernière intervention
- 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
007Julien 279 Messages postés mercredi 22 septembre 2010Date d'inscription 8 janvier 2014 Dernière intervention - 25 févr. 2011 à 12:16
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.

Merci 007Julien 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 85 internautes ce mois-ci

Commenter la réponse de 007Julien
stff406 2 Messages postés mercredi 20 janvier 2010Date d'inscription 25 février 2011 Dernière intervention - 25 févr. 2011 à 15:31
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.