by davidElmaleh » 23 Jun 2014, 00:23
Bonjour,
Voila, j'aimerais créer un défilement d'image en fondue en HTML/CSS/JQUERY. Bref, voila mon code
HTML :
- Code: Select all
<div height=100 id="scrolling"> <img id="i1" src="images/i1-scroll.png" style="opacity:1;"/> <img id="i2" src="images/i2-scroll.png" style="opacity:0;"/> <img id="i3" src="images/i3-scroll.png" style="opacity:0;"/> </div>
| CSS:
- Code: Select all
#scrolling img { width:80%; margin-top:1px; height:53%; position:absolute; background-color:silver; box-shadow: 5px 5px 20px grey; }
| JQUERY:
- Code: Select all
<script> $(function() { function fade(){ if ($('#i1').css('opacity')!=0) { $('#i1').fadeTo(2000,0); $('#i2').fadeTo(2000,1); }; if ($('#i2').css('opacity')!=0) { $('#i2').fadeTo(2000,0); $('#i3').fadeTo(2000,1); }; if ($('#i3').css('opacity')!=0) { $('#i3').fadeTo(2000,0); $('#i1').fadeTo(2000,1); };}; setInterval(fade,8000); }); </script>
|
Ce code marche. Mais, un problème, je ne veux pas passer par position:absolute;
Une idée?
Merci d'avance.