Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 28/02/2011, 18h24   #1
Invité de passage
 
Inscription : décembre 2010
Messages : 21
Détails du profil
Informations forums :
Inscription : décembre 2010
Messages : 21
Points : 0
Points : 0
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 :
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);
 
 
 
 
});
pls85 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 01/03/2011, 17h52   #2
Membre habitué
 
Avatar de DiDieuh
 
Étudiant
Inscription : juillet 2009
Messages : 110
Détails du profil
Informations personnelles :
Âge : 22

Informations professionnelles :
Activité : Étudiant

Informations forums :
Inscription : juillet 2009
Messages : 110
Points : 115
Points : 115
Ceci devrait faire l'affaire
Code :
var myTimer = setInterval(ma_fonction, mon_delais) ;
Une mini doc : https://developer.mozilla.org/en/window.setInterval

Bon courage
__________________
DiDi
DiDieuh est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 14h25.


 
 
 
 
Partenaires

Hébergement Web