Accueil > Forum > > > > Intervalle de temps en defilement photo javascript
Intervalle de temps en defilement photo javascript
mardi 22 février 2011 à 14:24:32 |
Intervalle de temps en defilement photo javascript

quinton75
|
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
Code Javascript :
;(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 );
|
|
vendredi 25 février 2011 à 16:49:25 |
Re : Intervalle de temps en defilement photo javascript

007Julien
|
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)
Code Javascript :
var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="http://www.decideurstv.com/wp-content/themes/dtv-hulu/images/scroll_left.png" />')
.after('<img id="rightBut" class="scrollButtons right" src="http://www.decideurstv.com/wp-content/themes/dtv-hulu/images/scroll_right.png" />');
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).
Code Javascript : $(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...
|
|
vendredi 25 février 2011 à 17:22:07 |
Re : Intervalle de temps en defilement photo javascript

quinton75
|
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é
|
|
vendredi 25 février 2011 à 18:27:26 |
Re : Intervalle de temps en defilement photo javascript

007Julien
|
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 ?
|
|
Cette discussion est classée dans : key, settings, attr, duration, if
Répondre à ce message
Sujets en rapport avec ce message
Timer sur slider js [ par quinton75 ]
Bonjour[^^clinoeil1][^^clinoeil1][^^clinoeil1][^^clinoeil1] Je souhaite faire defiler mes photos avec un timer de 3 secondes par exemple...Pour le mo
récupération du title en javascript [ par slashf ]
salut à tous, voilà j'ai un petit problème au niveau de mon javascript, j'ai un code qui affiche la taille réelle d'une image après un clic sur la min
Amélioration de script [ par charlieddr ]
Bonjour, Je posséde un script (libre)pour un QCM mais le soucis,le concepteur ne soutient plus son script. Il est en deux parties, le test (liste.html
Probleme Upload photo [ par Romain54000 ]
Bonjour, Voila j'ai deux soucies, le premier et que j'ai deux erreur lors de l'importation de ma photo le marche parfaitement mis a part ces deux err
Formulaire Newsletter facebook FBML/FBJS [ par quinton75 ]
Bonjour,[^^clinoeil1][^^clinoeil1] Je souhaite intégrer un formulaire d'inscription à ma Newsletter sur ma page facebook Mon code source HTML d'inté
Radio HTML et JacvaScript [ par momosan77 ]
Bonjour, j'ai actuellement un petit problème je souhaite after un if qui retourner true si un radio html est cocher. Le probleme c'est que je n'arriva
Probleme formulaire et upload photo [ par Romain54000 ]
Bonjour, Voila j'ai un script php qui me permet d'uploader une photo dans mon formulaire sans avoir besoin de recharger ma page ou de valider mon for
alerte si les champs sont vide [ par amine124 ]
bonjours, j'ai le code suivant, j'ai un pb dans la fonction verif(). ça marche pas, veuillez mz dire où est le pb exactement; merci d'avance. fu
Intégrer du javascirpit sur facebook (FBML/FBJS) [ par quinton75 ]
Hello,[^^clinoeil1][^^clinoeil1][^^clinoeil1] Petite question à pose. Je souhaite intégrer un formulaire d'inscription à ma Newsletter sur ma page
FBJS : ou mettre le javascript étant dans <head> en html sans le head en fbjs ? [ par quinton75 ]
[code=js] Webform var dtCh='/'; var minYear=1900; var maxYear=2100; function isValidInteger(s){ var i; for(i=
Livres en rapport
|
Derniers Blogs
JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|