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

Javascript / DHTML / Ajax

 > 

Framework

 > 

Ajax

 > 

Intervalle de temps en defilement photo javascript


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

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=


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 : 1,139 sec (3)

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