IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

diaporama avec javascript


Sujet :

jQuery

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 44
    Par défaut diaporama avec javascript
    Bonsoir,

    à travers le web j'ai réussi à prendre le code source pour la réalisation d'un diaporama.

    Cependant, j'ai un petit problème, en effet, il n'y a que le défilement automatique qui m'intéresse et non et le défilement manuel.

    Dans ce code, il intègre les deux...j'ai essayé par les connaissances que j'ai acquises en cours de les éliminer mais je n'y arrive pas.

    Voici le lien de la page d'accueil de mon site:http://pixel-edition.fr/accueil.html

    Vous pouvez remarquer qu'il y a la présence de "prec., pause, suiv.":

    Le code javascript où je pense pouvoir éliminer le problème:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
     
    (function($){
    	$.fn.diaporama = function(options) {
     
    		var defaults = {
    			delay: 3,
    			animationSpeed: "normal",
    			controls:true
    		};
     
    		var options = $.extend(defaults, options);
     
    		this.each(function(){
     
    			var obj = $(this);
     
     
    			if($(obj).find("li").length > 1){
    				var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
    				var sens = "right";
    				var pause = false;
     
    				$(obj).find("li").hide();
    				$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
     
    				// Controls
     
    				if(options.controls)
    				{
    					$(obj).after("<div class='diaporama_controls'><div class='btns'><a href='#' class='prev'>Prec.</a> <a href='#' class='pause'>Pause</a> <a href='#' class='next'>Suiv.</a></div></div>");
     
    					$(obj).siblings().find(".prev").click(function(){
    						clearInterval(inter);
    						prevElt(options);
    						if(!pause)
    							inter = setInterval(function(){prevElt(options)}, (options.delay*1000));
    						sens = "left";
    					});
     
    					$(obj).siblings().find(".next").click(function(){
    						clearInterval(inter);
    						nextElt(options);
    						if(!pause)
    							inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
    						sens = "right";
    					});
     
    					$(obj).siblings().find(".pause").toggle(
    						function(){
    							$(this).removeClass("pause").addClass("play");
    							clearInterval(inter);
    							pause = true;
    						},
    						function(){
    							$(this).removeClass("play").addClass("pause");
    							inter = setInterval(function(){ (sens == "right")?nextElt(options):prevElt(options)}, (options.delay*1000));
    							pause = false;
    						}
    					);
    				}
     
    				// Affiche l'élément suivant
     
    				function nextElt(options)
    				{
    					$(obj).find("li.active").fadeOut(options.animationSpeed);
     
    					if(!$(obj).find("li.active").is(":last-child"))
    					{
    						$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
    						$(obj).find("li.active").fadeIn(options.animationSpeed);
     
    					}
    					else
    					{
    						$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
    						$(obj).find("li:last-child").removeClass("active");
    					}
    				}
     
    				// Affiche l'élément précédent
     
    				function prevElt(options)
    				{
    					$(obj).find("li.active").fadeOut(options.animationSpeed);
     
    					if(!$(obj).find("li.active").is(":first-child"))
    					{
    						$(obj).find("li.active").prev().addClass("active").next().removeClass("active");
    						$(obj).find("li.active").fadeIn(options.animationSpeed);
     
    					}
    					else
    					{
    						$(obj).find("li:last-child").addClass("active").fadeIn(options.animationSpeed);
    						$(obj).find("li:first-child").removeClass("active");
    					}
    				}
    			}
    		});
     
    		return this;
    	};
    })(jQuery);
    Est-ce possible d'éliminer le défilement automatique?

    Merci d'avance.

    Cordialement,

    Serpolet.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    j'ai essayé par les connaissances que j'ai acquises en cours de les éliminer mais je n'y arrive pas.
    Je ne sais pas pourquoi, mais la ligne 8 m'indique que tu n'as pas dû chercher bien loin...

    A tout hasard, que se passe-t-il si tu la remplace par
    qui pourrait, par exemple, t'empêcher de rentrer dans la condition de la ligne 28 qui mentionne précisément
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(obj).after("<div class='diaporama_controls'><div class='btns'><a href='#' class='prev'>Prec.</a> <a href='#' class='pause'>Pause</a> <a href='#' class='next'>Suiv.</a></div></div>");
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour, ce qui me laisse dubitatif, c'est ca :
    Citation Envoyé par serpolet Voir le message
    ... en effet, il n'y a que le défilement automatique qui m'intéresse ...
    ... Est-ce possible d'éliminer le défilement automatique?
    J'aurais donc mis :
    controls:cadependduvent

    ps : j'aime bien l'ambiance de ton site.
    Par contre, j'aurais laissé un menu sur toutes les pages (plutot que des liens ">> retour" ou ">> Accueil") ...
    Et l'espace au dessus du bandeau est trop grand. Ou j'y aurais mis la denomination "Création graphique - communication". Et du coup le menu en dessous.
    Mais bon. Ce sont des avis personnels ...
    Dernière modification par Invité ; 12/08/2011 à 10h59.

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ah oui, effectivement...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

Discussions similaires

  1. Diaporama HTML / JavaScript ne fonctionnent plus avec IE10 !
    Par jpe54 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 03/04/2013, 21h36
  2. Réponses: 1
    Dernier message: 12/11/2011, 21h59
  3. Defilement de la fenetre avec JavaScript
    Par black is beautiful dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/09/2004, 10h21
  4. Lien ASP avec javascript
    Par RATIER dans le forum ASP
    Réponses: 3
    Dernier message: 15/07/2004, 08h54
  5. Réponses: 4
    Dernier message: 27/04/2004, 14h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo