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 :

Bandeau d'images défilantes


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut Bandeau d'images défilantes
    Salut à tous.

    J'aimerai faire un bandeau avec des images qui défilent dedans.

    J'ai trouvé :
    Code javascript : 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
     $(function () {
        defilImg('bandeau', ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]);
      });
     
    function defilImg(el,srcs,pas,tps) {
      if(typeof el=="string") { el = document.getElementById(el); }
      var tps = tps || 200;
      var pas = pas || 5;
      var imgs = [];
      var offset = 0;
      for(var i=0,l=srcs.length;i<l;i++) {
        var img = new Image();
        img.src = srcs[i];
        imgs.push("/Images/" + img);
        img.style.height=el.offsetHeight+"px";
        img.style.position = "absolute";
        img.style.left = offset+"px";
        el.appendChild(img);
        offset += img.offsetWidth;
      }
      var first = 0;
      var last = imgs.length-1;
     
      (function d() {
        for(var i=0,l=imgs.length;i<l;i++) {
          var left = parseInt(imgs[i].style.left,10);
          imgs[i].style.left = (left-pas)+"px";
          if(i==first && (left-pas+imgs[i].offsetWidth)<0) {
            imgs[i].style.left = (parseInt(imgs[last].style.left,10)+imgs[last].offsetWidth-(i==0?pas:0))+"px";
            last = first++;
            if(first>imgs.length-1) { first = 0; }
          }
        }
        setTimeout(d,tps);
      })();
    }

    et dans ma master:
    Code html : 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
    <%@ Master Language="VB" CodeFile="Client.master.vb" Inherits="Master_Client" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="/Scripts/ImgDefilante.js"></script>
     
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="Form1" runat="server">
        <div>
            <div class="page">
                <div class="header">
                    <div id="bandeau" style="position: relative; width: 500px; height: 100px; border: 1px solid black;
                        overflow: hidden;">
                    </div>
                </div>
                <div class="main">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                </div>
                <div class="clear">
                </div>
                <br />
            </div>
            <div class="footer">
                <asp:HyperLink ID="lnkAccueil" runat="server" NavigateUrl="~/Default.aspx">Accueil </asp:HyperLink>-
                <asp:HyperLink ID="lnkMentionLeg" runat="server" NavigateUrl="~/MentionLegale.aspx">Mentions légales </asp:HyperLink>
                -
                <asp:HyperLink ID="lnkContact" runat="server" NavigateUrl="~/Contact.aspx">Contacts
                </asp:HyperLink>
            </div>
        </div>
        </form>
    </body>
    </html>

    mais rien ne se passe

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonjour

    Je ne connais pas, mais il doit certainement exister un plugin "slider" du genre bandeau.

    Au hasard, avec :
    1. http://www.zurb.com/playground/orbit...y-image-slider
    2. http://bxslider.com/
    3. http://webdesignledger.com/resources...slider-plugins


    Dans votre code, remplacer : imgs.push( "/Images/" + img ); par imgs.push( img );.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    Meric pour ta réponse.

    En fait, un slider image par image, je sais faire.

    Je cherche à mettre les images à la file, c'est à dire, qu'il doit y en avoir plusieurs afficher en même temps, et quelles passent en boucle.

    J'ai corrigé par rapport à ta remarque ... faut que j'arrete de programmer le soir ..
    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
     $(function () {
        defilImg('bandeau', ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]);
      });
     
    function defilImg(el,srcs,pas,tps) {
      if(typeof el=="string") { el = document.getElementById(el); }
      var tps = tps || 200;
      var pas = pas || 5;
      var imgs = [];
      var offset = 0;
      for(var i=0,l=srcs.length;i&lt;l;i++) {
        var img = new Image();
        img.src = "/Images/" + srcs[i];
        imgs.push(img);
        img.style.height=el.offsetHeight+"px";
        img.style.position = "absolute";
        img.style.left = offset+"px";
        el.appendChild(img);
        offset += img.offsetWidth;
      }
      var first = 0;
      var last = imgs.length-1;
     
      (function d() {
        for(var i=0,l=imgs.length;i<l;i++) {
          var left = parseInt(imgs[i].style.left,10);
          imgs[i].style.left = (left-pas)+"px";
          if(i==first && (left-pas+imgs[i].offsetWidth)<0) {
            imgs[i].style.left = (parseInt(imgs[last].style.left,10)+imgs[last].offsetWidth-(i==0?pas:0))+"px";
            last = first++;
            if(first>imgs.length-1) { first = 0; }
          }
        }
        setTimeout(d,tps);
      })();
    }
    J'ai mis ça dans un fichier .js

    Mais ça ne se charge pas. Quand je met un point d'arrêt ça me dit qu'il ne peut pas être atteint.

    Dans ma master :
    Code html : 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
    <%@ Master Language="VB" CodeFile="Client.master.vb" Inherits="Master_Client" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="/Scripts/ImgDefilante.js"></script>
     
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="Form1" runat="server">
        <div>
            <div class="page">
                <div class="header">
                    <div id="bandeau" style="position: relative; width: 500px; height: 100px; border: 1px solid black;
                        overflow: hidden;">
                    </div>
                </div>
                <div class="main">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                </div>
                <div class="clear">
                </div>
                <br />
            </div>
            <div class="footer">
                <asp:HyperLink ID="lnkAccueil" runat="server" NavigateUrl="~/Default.aspx">Accueil </asp:HyperLink>-
                <asp:HyperLink ID="lnkMentionLeg" runat="server" NavigateUrl="~/MentionLegale.aspx">Mentions légales </asp:HyperLink>
                -
                <asp:HyperLink ID="lnkContact" runat="server" NavigateUrl="~/Contact.aspx">Contacts
                </asp:HyperLink>
            </div>
        </div>
        </form>
    </body>
    </html>

    ce qui donne sur une page où il n'y a rien
    Code html : 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
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
     
    </title>
        <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="/Scripts/ImgDefilante.js"></script>
     
        <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form method="post" action="Accueil.aspx" id="Form1">
    <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRknB4f10jWiTSMsMCc3e8hBntv4zUGMvlSyIYNiOxMZQI=" />
    </div>
     
        <div>
            <div class="page">
                <div class="header">
                    <div id="bandeau" style="position: relative; width: 500px; height: 100px; border: 1px solid black;
                        overflow: hidden;">
                    </div>
                </div>
                <div class="main">
     
     
                </div>
                <div class="clear">
                </div>
                <br />
            </div>
            <div class="footer">
                <a id="lnkAccueil" href="Default.aspx">Accueil </a>-
                <a id="lnkMentionLeg" href="MentionLegale.aspx">Mentions légales </a>
                -
                <a id="lnkContact" href="Contact.aspx">Contacts
                </a>
            </div>
        </div>
        </form>
    </body>
    </html>

  4. #4
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    Pour simplifier j'ai tout sortie est mis sur une page simple (pas dans la master)
    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
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
     
    </title>
        <script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../Scripts/jquery.cycle.all.js"></script>
     
        <script type="text/javascript" src="../Scripts/ImgDefilante.js" language="jscript"></script>
        <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
        <script>
            $(document).ready(function () {
     
                $('#s4').cycle({
                    fx: 'fade',
                    speed: 300,
                    timeout: 3000,
                    next: 's4',
                    pause: 1
                });
            });
            defilImg('bandeau', new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"));
     
            function defilImg(elName, srcs, pas, tps) {
                el = document.getElementById(elName);
                var tps = tps || 200;
                var pas = pas || 5;
                var imgs = [];
                var offset = 0;
                for (var i = 0; i < srcs.length; i++) {
                    var img = new Image();
                    img.src = "/Images/" + srcs[i];
                    imgs.push(img);
                    img.style.height = el.offsetHeight + "px";
                    img.style.position = "absolute";
                    img.style.left = offset + "px";
                    el.append(img);
                    offset += img.offsetWidth;
                }
                var first = 0;
                var last = imgs.length - 1;
     
                (function d() {
                    for (var i = 0, l = imgs.length; i < l; i++) {
                        var left = parseInt(imgs[i].style.left, 10);
                        imgs[i].style.left = (left - pas) + "px";
                        if (i == first && (left - pas + imgs[i].offsetWidth) < 0) {
                            imgs[i].style.left = (parseInt(imgs[last].style.left, 10) + imgs[last].offsetWidth - (i == 0 ? pas : 0)) + "px";
                            last = first++;
                            if (first > imgs.length - 1) { first = 0; }
                        }
                    }
                    setTimeout(d, tps);
                })();
            }
        </script>
    </head>
    <body>
        <form method="post" action="Accueil.aspx" id="Form1">
    <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkpa3F1cHyXF8jzsb72b10oSkbkEwQ37m4J+UZOP93xvM=" />
    </div>
     
        <div>
            <div class="page">
                <div class="header">
     
                </div>
                <div class="main">
     
        <center>
            <div id="bandeau" style="position: relative; width: 500px; height: 100px; border: 1px solid black;
                overflow: hidden;">
            </div>
            <div class="pics" id="s4">
                <img src="/Images/1.jpg" height="100" />
                <img src="/Images/2.jpg" height="100" />
                <img src="/Images/3.jpg" height="100" />
                <img src="/Images/4.jpg" height="100" />
                <img src="/Images/5.jpg" height="100" />
                <img src="/Images/6.jpg" height="100" />
            </div>
        </center>
     
                </div>
                <div class="clear">
                </div>
                <br />
            </div>
            <div class="footer">
                <a id="lnkAccueil" href="Accueil.aspx">Accueil </a>-
                <a id="lnkMentionLeg" href="MentionLegale.aspx">Mentions légales </a>
                -
                <a id="lnkContact" href="Contact.aspx">Contacts
                </a>
            </div>
        </div>
        </form>
    </body>
    </html>
    defilImg('bandeau', new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg"));

    s'exécute bien mais getelementbyid(bandeau) est null

  5. #5
    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
    C'est normal...

    Au moment où tu appelles la fonction, tu es encore dans le <head> donc aucun élément n'existe encore dans le <body> en particulier #bandeau...
    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

  6. #6
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    je suis une buse

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 13/04/2007, 13h04
  2. Problème image défilante
    Par reg64 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 15
    Dernier message: 20/12/2006, 18h05
  3. script d'images défilantes 2 fois dans la même page
    Par lau_1611 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 08/12/2006, 22h16
  4. images défilantes de la gauche vers la droite
    Par paradeofphp dans le forum Flash
    Réponses: 1
    Dernier message: 07/08/2006, 23h51
  5. Images défilantes de la droite vers la gauche
    Par paradeofphp dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 01/08/2006, 11h43

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