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

JavaScript Discussion :

Intégrer un timer dans un slideshow en JS


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Inscrit en
    Décembre 2010
    Messages
    21
    Détails du profil
    Informations forums :
    Inscription : Décembre 2010
    Messages : 21
    Points : 25
    Points
    25
    Par défaut Intégrer un timer dans un slideshow en JS
    Bonjour

    Je ne m'y connais pas du tout en js donc malgré divers tuto de slideshow je rame

    Je souhaite faire defiler mes photos avec un timer de 3 secondes par exemple.Je suppose qu'il faut que j'utilise un set timeout ou set interval

    Pour le moment elles ne defilent qu'avec des flèches...

    Je souhaite que toutes les 3 secondes il y ait la fonction de la flèche droite qui se declenche...

    Voici le javavascript

    Pouvez vous me dire quel code javascript modifier et comment ?


    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
    105
    106
    107
    108
    109
    110
    111
    112
    113
    // when the DOM is ready...
    $(document).ready(function () {
     
        var $panels = $('#slider .scrollContainer > div');
        var $container = $('#slider .scrollContainer');
     
        // if false, we'll float all the panels left and fix the width 
        // of the container
        var horizontal = true;
     
        // float the panels left if we're going horizontal
        if (horizontal) {
            $panels.css({
                'float' : 'left',
                'position' : 'relative' // IE fix to ensure overflow is hidden
            });
     
            // calculate a new width for the container (so it holds all panels)
            $container.css('width', $panels[0].offsetWidth * $panels.length);
        }
     
        // collect the scroll object, at the same time apply the hidden overflow
        // to remove the default scrollbars that will appear
        var $scroll = $('#slider .scroll').css('overflow', 'hidden');
     
        // apply our left + right buttons
        $scroll
            .before('<img class="scrollButtons left" src="./images/gauche.jpg" />')
            .after('<img id="rightBut" class="scrollButtons right" src="./images/droite.jpg" />');
     
     
     
        // handle nav selection
        function selectNav() {
            $(this)
                .parents('ul:first')
                    .find('a')
                        .removeClass('selected')
                    .end()
                .end()
                .addClass('selected');
        }
     
        $('#slider .navigation').find('a').click(selectNav);
     
        // go find the navigation link that has this target and select the nav
        function trigger(data) {
            var el = $('#slider .navnav .navigation').find('a[href$="' + data.id + '"]').get(0);
            selectNav.call(el);
        }
     
        if (window.location.hash) {
            trigger({ id : window.location.hash.substr(1) });
        } else {
            $('ul.navigation a:first').click();
        }
     
        // offset is used to move to *exactly* the right place, since I'm using
        // padding on my example, I need to subtract the amount of padding to
        // the offset.  Try removing this to get a good idea of the effect
        var offset = parseInt((horizontal ? 
            $container.css('paddingTop') : 
            $container.css('paddingLeft')) 
            || 0) * -1;
     
     
        var scrollOptions = {
            target: $scroll, // the element that has the overflow
     
            // can be a selector which will be relative to the target
            items: $panels,
     
            navigation: '.navigation a',
     
            // selectors are NOT relative to document, i.e. make sure they're unique
            prev: 'img.left', 
            next: 'img.right',
     
            // allow the scroll effect to run both directions
            axis: 'xy',
     
            onAfter: trigger, // our final callback
     
            offset: offset,
     
            // duration of the sliding effect
            duration: 500,
     
            // easing - can be used with the easing plugin: 
            // http://gsgd.co.uk/sandbox/jquery/easing/
            easing: 'swing'
        };
     
        // apply serialScroll to the slider - we chose this plugin because it 
        // supports// the indexed next and previous scroll along with hooking 
        // in to our navigation.
        $('#slider').serialScroll(scrollOptions);
     
        // now apply localScroll to hook any other arbitrary links to trigger 
        // the effect
        $.localScroll(scrollOptions);
     
        // finally, if the URL has a hash, move the slider in to position, 
        // setting the duration to 1 because I don't want it to scroll in the
        // very first page load.  We don't always need this, but it ensures
        // the positioning is absolutely spot on when the pages loads.
        scrollOptions.duration = 1;
        $.localScroll.hash(scrollOptions);
     
     
     
     
    });

  2. #2
    Membre habitué Avatar de DiDieuh
    Étudiant
    Inscrit en
    Juillet 2009
    Messages
    111
    Détails du profil
    Informations personnelles :
    Âge : 34

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2009
    Messages : 111
    Points : 141
    Points
    141
    Par défaut
    Ceci devrait faire l'affaire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var myTimer = setInterval(ma_fonction, mon_delais) ;
    Une mini doc : https://developer.mozilla.org/en/window.setInterval

    Bon courage
    DiDi

Discussions similaires

  1. Réponses: 1
    Dernier message: 05/05/2010, 00h07
  2. Réponses: 5
    Dernier message: 12/05/2004, 16h37
  3. intégrer dll VB dans code C/C++
    Par inertia dans le forum MFC
    Réponses: 3
    Dernier message: 09/05/2004, 12h09
  4. LYCOS ET MYSQL - Intégrer des images dans une base!
    Par archeo dans le forum Installation
    Réponses: 3
    Dernier message: 06/04/2004, 13h45
  5. [CR][Access] intégrer un viewer dans un formulaire access
    Par nicolak dans le forum SAP Crystal Reports
    Réponses: 7
    Dernier message: 13/01/2003, 15h52

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