Page 1 of 1

[HTML/CSS/JQUERY] Scroll image

Unread postPosted: 23 Jun 2014, 00:23
by davidElmaleh
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.