11486 sujets

JavaScript, DOM et API Web HTML5

Image switch modif fonction jquery (RESOLU J'AI UTILISER JQUERY CYCLE

Bonjour A tous,

J'ai trouvé ceci sur le net, trés intéressant, 
http://www.hieu.co.uk/ImageSwitch/ImageSwitchSample/TryNow.htm
.
J'aimerais utiliser l'effet "fade in", mais l'animation (image remplace une autre) est appelé par un "click" sur le fade in, moi j'aimerai que les 3 photos défilent toute seul.
Premierement je connais pas le nom de la fonction pour qu'elle fonctionne automatiquement, et deuxièmement, je sais pas si je change "click" par "blur" ou autre j'en sais rien, si cela va marcher.

voici le code : 


/* Example style */
.SplashFrame{
	background: url(Images/slashframe.jpg) no-repeat 0 0;
	width: 497px;
	height: 236px;
	margin: 0 auto;
	padding: 27px 0 0 36px;
}
.SlashEff{
	background: url(Images/tryitnow.jpg) no-repeat 0 0;
	width: 550px;
	height:62px;
	margin: 20px auto 0;
	padding: 5px 0 0 60px;
}
.SlashEff ul li{
	float: left;
	list-style-image: none;
	list-style-type: none;	
	width: 100px;
	cursor: pointer;
}
.SlashEff ul li:hover{
	text-decoration: underline;
}
</style>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="Groject.ImageSwitch.102.yui.js"></script>
<script type="text/javascript">
	var ImgIdx = 2;//To mark which image will be select next
	
	function PreloadImg(){
		$.ImagePreload("images/slash2.jpg");
		$.ImagePreload("images/slash3.jpg");
		$.ImagePreload("images/slash4.jpg");
		$.ImagePreload("images/slash5.jpg");
	}
	$(document).ready(function(){
		PreloadImg();
		
		$(".SlashEff ul li").click(function(){
				$(".Slash").ImageSwitch({Type:$(this).attr("rel"), 
											NewImage:"images/slash"+ImgIdx+".jpg", speed: 4000
										});
			ImgIdx++;
			if(ImgIdx>5) ImgIdx = 1;
		});		
	});
</script>
</head>
<body>
	<div>
		<h3>TRY EFFECTS</h3>

		<div class="SplashFrame">
			<img src="images/slash1.jpg" alt="Slash" class="Slash"/>
		</div>			
		<div class="SlashEff">
			<ul>
				<li class="TryFadeIn" rel="FadeIn">Fade in</li>
				<li class="TryFlyIn"  rel="FlyIn">Fly in</li>
				<li class="TryFlyOut"  rel="FlyOut">Fly out</li>

				<li class="TryFlipIn"  rel="FlipIn">Flip in</li>
				<li class="TryFlipOut"  rel="FlipOut">Flip out</li>				
				<li class="TryScroll"  rel="ScrollIn">Scroll in</li>
				<li class="TryScroll"  rel="ScrollOut">Scroll out</li>
				<li class="TrySingleDoor" rel="SingleDoor">Single Door</li>
				<li class="TryDoubleDoor" rel="DoubleDoor">Double Door</li>

			</ul>		
		</div>
	</div>
	<p id="Debug"></p>




Merci bcp pour votre aide
Modifié par dreadstock (08 Oct 2009 - 18:41)
Salut,

Quand tu dit: "j'aimerai que les 3 photos défilent toute seul"
Tu veux que tes photos défilent toutes seule dès chargement de ta page sans aucune action du visiteur?

Si tel est le cas, je n'ai pas testé, mais à priori, il suffit juste de retirer la partie d'appel au click du script et mettre à la place une boucle infinie (avec while par exemple)

$(".SlashEff ul li").click(function(){


Pour ne garder que cela:


$(document).ready(function(){
   PreloadImg();

   while ( 1 ){
   $(".Slash").ImageSwitch({Type:$(this).attr("rel"), 
	NewImage:"images/slash"+ImgIdx+".jpg", speed: 4000
   });
	ImgIdx++;
	if(ImgIdx>5) ImgIdx = 1;
   }
});
Merci mais, quand je remplace le code tout mon pc plante. SOus IE et sous mozilla.

Plus rien ne réponds.
Avez vous une solution pour moi. Ou un script du même genre que je ne connaitrai pas.
Objectif : avoir un bandeau, ou mes 2/3 photos défile avec ce genre d'animation assez simple.
Ce javascript est bien, mais j'arrive pas à le modifier. Merci pour votre précieuse aide
Sujet clos
Aller à