Timer sur slider js

Question

Bonjour

Je souhaite faire defiler mes photos avec un timer de 3 secondes par exemple...Pour le moment elles ne defilent qu'avec des flèches...

J'ai repris le codesource de 
http://www.decideurstv.com/

Pouvez vous me dire quel code javascript modifier et comment ?

Voici le code js de scroll

;(function( $ ){

var $scrollTo $.scrollTo function( target, duration, settings ){
$scrollTo.window().scrollTo( target, duration, settings );
};

$scrollTo.defaults = {
axis:'y',
duration:1
};

//returns the element that needs to be animated to scroll the window
$scrollTo.window = function(){
return $( $.browser.safari ? 'body' : 'html' );
};

$.fn.scrollTo = function( target, duration, settings ){
if( typeof duration == 'object' ){
settings = duration;
duration = 0;
}
settings = $.extend( {}, $scrollTo.defaults, settings );
duration = duration || settings.speed || settings.duration;//speed is still recognized for backwards compatibility
settings.queue = settings.queue && settings.axis.length > 1;//make sure the settings are given right
if( settings.queue )
duration /= 2;//let's keep the overall speed, the same.
settings.offset = both( settings.offset );
settings.over = both( settings.over );

return this.each(function(){
var elem this, $elem $(elem),
t target, toff, attr {},
win = $elem.is('html,body');
switch( typeof t ){
case 'number'://will pass the regex
case 'string':
if( /^([+-]=)?\d+(px)?$/.test(t) ){
t = both( t );
break;//we are done
}
t = $(t,this);// relative selector, no break!
case 'object':
if( t.is || t.style )//DOM/jQuery
toff (t $(t)).offset();//get the real position of the target 
}
$.each( settings.axis.split(''), function( i, axis ){
var Pos	axis 'x' ? 'Left' : 'Top',
pos = Pos.toLowerCase(),
key = 'scroll' + Pos,
act = elem[key],
Dim axis 'x' ? 'Width' : 'Height',
dim = Dim.toLowerCase();

if( toff ){//jQuery/DOM
attr[key] = toff[pos] + ( win ? 0 : act - $elem.offset()[pos] );

if( settings.margin ){//if it's a dom element, reduce the margin
attr[key] -= parseInt(t.css('margin'+Pos)) || 0;
attr[key] -= parseInt(t.css('border'+Pos+'Width')) || 0;
}

attr[key] += settings.offset[pos] || 0;//add/deduct the offset

if( settings.over[pos] )//scroll to a fraction of its width/height
attr[key] += t[dim]() * settings.over[pos];
}else
attr[key] = t[pos];//remove the unnecesary 'px'

if( /^\d+$/.test(attr[key]) )//number or 'number'
attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) );//check the limits

if( !i && settings.queue ){//queueing each axis is required					
if( act != attr[key] )//don't waste time animating, if there's no need.
animate( settings.onAfterFirst );//intermediate animation
delete attr[key];//don't animate this axis again in the next iteration.
}
});			
animate( settings.onAfter );			

function animate( callback ){
$elem.animate( attr, duration, settings.easing, callback && function(){
callback.call(this, target);
});
};
function max( Dim ){
var el = win ? $.browser.opera ? document.body : document.documentElement : elem;
return el['scroll'+Dim] - el['client'+Dim];
};
});
};

function both( val ){
return typeof val == 'object' ? val : { top:val, left:val };
};

})( jQuery );

007Julien · Answer

Le prototype suivant met en évidence les principes du diaporama et devrait permettre d'en construire de très légers fonctionnant sur tous les navigateurs récents... Diaporama Les principes du diaporama

[javascript:avc() Image suivante] [javascript:dpr(okd=!okd) Diaporama]

quinton75 · Answer

Merci bcp... maias j'ai quasiment fini mon diapo, il me reste juste le timer donc je ne souhaiterais pas recommencer à 0.


Voici le js de navigation de slides
// 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('')
        .after('');

    // 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);

});

007Julien · Answer

Ce serait pourtant plus simple que de laisser subsister des instructuions totalement inutiles 
comme celles-ci :

$scroll
        .before('')
        .after('');

007Julien · Answer

D'autant plus que ce script n'est pas le script de navigation mais seulement celui de mise en place exécuté à l'ouverture de la page lorsque le DOM (l'objet qui modélise du document) est prêt.

En effet, ce script définit l'axe (horizontal) de scrolling, puis modifie le style des panels (analogues à mes balises li) qui doivent s'aligner à gauche (float:left;) et dont la position doit être relative dans un container dont la largeur doit être égale à la largeur de chacun des panneaux multipliée par le nombre de panneaux. 
Il applique ensuite le style overflow:hidden (qui cache tout ce qui sort des dimensions d'un élément et permet d'obtenir une fenêtre sur les éléments intérieurs dont on fait varier la position) sur l'élément désigné par l'id slider et de classe scroll (var $scroll = $('#slider .scroll').css('overflow', 'hidden');), puis définit la fonction selectNav pour en faire un évènement à activer lors des clics sur l'un des quatre boutons figurants au centre sous le diaporama (partant de l'élément cliqué cette fonction remonte à l'élément parent pour supprimer la classe selected de chacun des liens et revenir in fine à l'élément initial pour le sélectionner).

... etc.
 
J'arrête là, les instructions suivantes ont pour but d'afficher à l'ouverture, la bonne image si l'adresse appelée est prolongée par un # suivi d'un numéro d'image (fonctionnement dégradé sans javascript) 

Ce script m'avait permis de trouver les boutons et donc de lancer le défilement du diaporama en simulant un click.

À défaut de mettre en oeuvre une solution personnelle parfaitement adaptée, il conviendrait pour éviter ce genre de bricolage de s'en tenir à un plugin de Jquery convenablement initialisé.

Bonne chance et bon courage...

Timer sur slider js

4 réponses

Votre réponse

Discussions similaires