begin process at 2012 05 29 12:10:46
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Intégrer un timer dans un slieshow


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Intégrer un timer dans un slieshow

lundi 28 février 2011 à 18:23:02 | Intégrer un timer dans un slieshow

quinton75

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 Javascript :
// 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);
	
	
	

});





Cette discussion est classée dans : var, to, scroll, slider, panels


Répondre à ce message

Sujets en rapport avec ce message

modification script -- centrer [ par pusse ] Salut a tous j'ai recuperer un script sur le net qui me permet de creer un  liste defilante de liens horizontalement avec action sur des fleches. Le s Problème texte défilant aux normes W3C [ par LordVizor ] Bonjour à tous, je vous solicite car je suis face à un problème. En effet, j'ai décidé de mettre mon site aux normes W3C et depuis mon javascript de t help me please netscape [ par fabricech ] je n'arrive pas a faire passer le code suivant sous netscape, meme apres un etonne d'aspirine!var lft = 10; // (window.screen.width/2);var pos = 10; Div bougeable en fonction du scroll... problème le navigateur panique... Script très pratique pour faire planter IE [ par MeTh ] Bonjour,J'essai de réalisé un script qui déplace les div verticalement ou horizontalement en fonction du scroll de la fenetre pour que les div reste t Scrolling horizontal [ par chabgyver ] Bonsoir,La portion de code ci-dessous permet de faire un scrolling vertical d'une page à l'intérieur d'une iframe, en tout cas, sur 2 de mes sites, ça slider [ par guilstunt ] Bonjour a tous je suis entrain de créer une slide barre. Jusque la j'ai réussi, j'arrive aussi a enregistrer la valeur dans ma BDD. Mon probleme c'e script de menu defilant pas assez extensible [ par pusse ] Bonjour à tous. J'ai recuperer un script en javascript qui permet de creer un menu de liens defilant horizontalement suivant une action sur des fleche script a modifier. Je suis pas capable de le faire [ par pusse ] Salut à tous. J'ai recuperer sur le net un script de menu defilant horizontalement. Tout marche tres bien sauf  que je rencontre un petit probleme. Qu ca coince avec cette fonction [ par B e N z ] salut tt le monde enfaite moi je suis en stage ds une société et on m'as charger de faire un formulaire pour leur site intranet mé le blem c que j'ava Script de diaporama de liens avec erreur etrange [ par pusse ] Bonjour à tous. J'ai recuperer un script sur un site qui cree une liste défilante de liens avec action sur 2 boutons (gauche et droite). Mais apres l'


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,920 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales