π
<-

[HTML/CSS/JQUERY] Scroll image

Discussions scientifiques et scolaires

[HTML/CSS/JQUERY] Scroll image

Unread postby 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.
Image
User avatar
davidElmalehProgrammeur
Niveau 14: CI (Calculateur de l'Infini)
Niveau 14: CI (Calculateur de l'Infini)
Level up: 19.6%
 
Posts: 409
Images: 9
Joined: 14 Oct 2012, 23:30
Location: Paris 19
Gender: Male
Calculator(s):
MyCalcs profile
Class: PSI*

Return to Maths, physique, informatique et autre...

Who is online

Users browsing this forum: ClaudeBot [spider] and 9 guests

-
Search
-
Social TI-Planet
-
Featured topics
Grand Concours 2024-2025 - Programmation Python
Comparaisons des meilleurs prix pour acheter sa calculatrice !
"1 calculatrice pour tous", le programme solidaire de Texas Instruments. Reçois gratuitement et sans aucune obligation d'achat, 5 calculatrices couleur programmables en Python à donner aux élèves les plus nécessiteux de ton lycée. Tu peux recevoir au choix 5 TI-82 Advanced Edition Python ou bien 5 TI-83 Premium CE Edition Python.
Enseignant(e), reçois gratuitement 1 exemplaire de test de la TI-82 Advanced Edition Python. À demander d'ici le 31 décembre 2024.
Aidez la communauté à documenter les révisions matérielles en listant vos calculatrices graphiques !
12345
-
Donations / Premium
For more contests, prizes, reviews, helping us pay the server and domains...
Donate
Discover the the advantages of a donor account !
JoinRejoignez the donors and/or premium!les donateurs et/ou premium !


Partner and ad
Notre partenaire Jarrety Calculatrices à acheter chez Calcuso
-
Stats.
1182 utilisateurs:
>1133 invités
>43 membres
>6 robots
Record simultané (sur 6 mois):
6892 utilisateurs (le 07/06/2017)
-
Other interesting websites
Texas Instruments Education
Global | France
 (English / Français)
Banque de programmes TI
ticalc.org
 (English)
La communauté TI-82
tout82.free.fr
 (Français)