Discussion :

[flo4020]

Bonjour,

Je souhaiterai réaliser qqchose d'assez simple, il me semble ms qui me pose problème.
J'avais trouvé un code que j'essaie d'adapter mais je cale...
Tout ce qui est css est ok...
JE voudrais créer un diaporama avec des images superposées mais avec des temps d'apparition différente.
JE m'explique :
- 1er tps: Image 1 apparait
- 2ème tps:Image 2 se superpose sur Image 1
- 3ème tps: les 2 disparaissent
- 4ème tps : Image 4 apparait et ainsi de suite

Je ne sais pas si j'ai été assez clair....
Je partais sur un liste mais il faudrait réimbriquer une liste à l'intérieur?

Voilà mon script simple pour le diapo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function(){
	$('.slider')._TMS({
		prevBu:'.prev',
		nextBu:'.next',
		playBu:'.play',
		duration:800,
		easing:'easeOutQuad',
		preset:'simpleFade',
		pagination:false,
		slideshow:3000,
		numStatus:false,
		pauseOnHover:true,
		banners:true,
		waitBannerAnimation:false,
		bannerShow:function(banner){
			banner.hide().fadeIn(800)
		},
		bannerHide:function(banner){
			banner.show().fadeOut(800)
		}
	});
})

Pour mon html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="slider">
	<ul class="items">
		<li><img src="images/Image1.jpg" alt="">
                    <strong class="banner1"><strong class="b1"><img src="images/texteimage1.png" width="960" height="403" /></strong></strong>
		</li>
                <li><img src="images/Image2.jpg" alt="">
		    <strong class="banner2"><strong class="b1"><img src="images/texteimage2.png" width="960" height="403" /></strong></strong>
		</li>
		<li><img src="images/Image3.jpg" alt="">
			<strong class="banner3"><strong class="b1"><img src="images/texteimage3.png" width="960" height="403" /></strong></strong>
		</li>
		<li><img src="images/Image4.jpg" alt="">
			<strong class="banner4"><strong class="b1"><img src="images/texteimage4.png" width="960" height="403" /></strong></strong>
		</li>						  
        </ul>

D'avance merci.
Bonne journée.

[danielhagnoul]

Bonjour

Il nous manque des éléments pour comprendre et tester le code.

TMS ?
Le code CSS ?
Les images ?

Ou un lien vers la page de test.

[flo4020]

Merci pour la réponse


Voilà le lien, ce sera plus simple :

http://www.veterinairevennes.be/c3d/

J'ai pris un kit site que j'ai essayé de remettre à ma sauce....

[danielhagnoul]

Complexe (CSS, JS multiples), le "slider" sur la page de test semble fonctionner correctement, je ne comprends pas bien la question, je suis incapable d'aider.