Intervalle de temps en defilement photo javascript

Question

Bonjour 

Je n'arrive pas à 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... 

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

Après avoir récupéré la page html complète http://www.decideurstv.com/ , il est possible d'obtenir un défilement automatique, en bricolant comme suit le scripts coda.slider.js. 

Ajouter un identifiant (id="rightBut") sur le bouton droit du scroller à la ligne 29 du fichier (après une modification de style, les lignes 24 à 29 insèrent dynamiquement les deux boutons de scroll)

    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
    $scroll
        .before('')
        .after('');

Prévoir en fin de fichier et après la fermeture du $(document).ready un setTimeout et une fonction auto simulant le clic sur le dit bouton toutes les deux secondes (2000 millisecondes).

$(document).ready(function () {
...
});
setTimeout('auto()',2000);
function auto(){
   document.getElementById('rightBut').click();
   setTimeout('auto()',2000);
}
Voilà une piste pas très glorieuse mais instructive (voir la mise à jour des boutons de scrolling par la fonction selectNav, soit après un clic, ligne 42, soit au chargement de la page, lignes 45 et suivantes). 
Il ne reste plus qu'à trouver le moyen de lancer cet évènement plus directement en ne reprenant que la quintessence de tous ces scripts...

quinton75 · Answer

Merci....Mais ça ne fonctionne pas....

Je Souhaite aussi passer de 4 images à 3 impages...Mais ça fait bugger le repère avec les 4 icones identifiant les pages quand on fait défilé les pages.....

Et pour finir en dessous du slider...Je veux mettre un bandeau de sous menu avec 4 icones qui sont sombres et au survol prennent de la lumiere...

Bref jouer sur l'opâcité

007Julien · Answer

Curieux cela fonctionne chez moi avec Internet Explorer et Mozilla FireFox.

L'idéal serait d'utiliser un plugin de JQuery. J'avais utilisé news accessible slider (voir les pages région ou maison de ce site avec défilement au bout de 10 secondes seulement) mais celui-ci ne semble plus au goût du jour. Peut-être que celui-ci pourrait convenir ?

Intervalle de temps en defilement photo javascript

3 réponses

Votre réponse