Diaporama différents timing
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:
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:
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.
