11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je suis un petit nouveau et également débutant même si je pense pouvoir me débrouiller un peu en mode bidouille.
Je me suis lancé dans la création d'un site de type portfolio. Il repose sur une grille de 4 colonnes avec un slideshow par projet. Et donc vous le voyez venir, le problème se situe à ce niveau là. J'avais dans un premier temps réussi à faire un slideshow pour un projet et cela me convenait parfaitement mais au moment de placer le 2ème, il y avait un conflit et le code n'était pas adapté. J'ai donc cherché un code qui permet de mettre plusieurs slideshow sur la même page. J'en ai trouvé un qui m'a l'air simple et efficace :
           
function swapImage(id, path)
{
var el = document.getElementById(id);
el.count = el.count || 0;
el.src = path[el.count];
el.count = (el.count + 1) % path.length;
}
function slideshow() {
setInterval(function () {
swapImage('slideVER', [
"images/VER/VERON1.jpg",
"images/VER/VERON2.jpg",
"images/VER/VERON3.jpg",
"images/VER/VERON4.jpg"
]);
swapImage('slideHOU', [
"images/HOU/HOU1.jpg",
"images/HOU/HOU2.jpg",
"images/HOU/HOU3.jpg",
"images/HOU/HOU4.jpg",
"images/HOU/HOU5.jpg",
"images/HOU/HOU6.jpeg"
]);
swapImage('slideGLA', [
"images/GLA/GLA1.jpg",
"images/GLA/GLA2.jpg",
"images/GLA/GLA3.jpg",
"images/GLA/GLA4.jpg",
"images/GLA/GLA5.jpg",
]);
}, 5000);
}
onload = slideshow;


Cela fonctionne bien sauf que j'aimerais faire en sorte que le passage à l'image suivante se fasse par clic et non pas automatiquement grâce à la fonction SetInterval. J'ai cherché toute l'aprem mais je n'ai pas réussi à trouver.

Je vous remercie par avance pour votre aide!

BIGdid
Bonjour,

donc la partie facile : ce qu'il peut être fait déjà pour retirer l'interval c'est de dégager la methode setInrval (ça va de soit)
Ensuite si tu veux faire en sorte que le slodeshow bouge au clic, tu dois mettre sur ta dit la méthode javascript onclick et créer une méthode qui passe à la photo d'après (avec un compteur).
Donc tu as le choix de faire :

/* méthode du onclick
 supposition : 
 monCompteur = 0
 nbImageMax = 5
 listeImages = ["/img/image1.png", "/img/image2.png", "/img/image3.png", "/img/image4.png", "/img/image5.png"]
*/

var monOnclick = function(event){
var img = document.getElementById("idImage");

if(monCompteur++ < nbImageMax){
  monCompteur++;
} else {
  monCompteur = 0;
}
  img.setAttribute("img", listeImages[monCompteur]);
}



voilà tu peux essayer de faire un truc de ce style là.
Après tu as des librairies qui le font très bien. Tu as juste à lire le paramétrage pour voir ce que tu veux faire et c'est fini.

Bon courage.