11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Diaporama effet slide...

Bonjour.
Voici le code d'un diaporama automatique qui fonctionne bien, mais dont la transition est inexistante (Je souhaiterais en effet améliorer l'affichage par un effet slide) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <style type="text/css">
div {
     max-width: 600px;
     overflow: hidden; 
     border: 1px solid darkkhaki;
     }   
img {    
     transition: margin-left 1s linear;
     margin-left: 0px;  
     }
     </style>
</head>
<body>
<div>
     <img src="mies/Crown-Hall.jpg" style="display:block;">
     <img src="mies/Farnsworth.jpg" style="display:none;">
     <img src="mies/Pavilion-1.jpg" style="display:none;">
     <img src="mies/Pavilion-2.jpg" style="display:none;">
</div>
<script type="text/javascript">
     index = 0 ;
     setInterval(carrousel, 3000) ;
     function carrousel()
          {
     document.images[index].style.display = "none" ;
     if ( index < 3 )
          index = index + 1 ;
     else
          index = 0 ;
     document.images[index].style.display = "block" ;
          } 
</script>
</body>
</html>

Explication : "setInterval" modifie l'attribut display de la diapo affichée à "none" et celui de la suivante à "block" et ce dans une boucle infinie. (index variant de 0 à 3 puisqu'il y a 4 diapos).
tout cela fonctionnne parfaitement.
Hélas la transition est brutale (de fait elle est inexistante), et j'avais donc envisagé de faire varier le "margin-left" à l'affichage.
j'ai testé diverses approches (méthode SetAttribute, propriété className, etc...) en modifiant la fonction carrousel, mais je n'arrive à rien. Quelque chose m'échappe...
D'avance merci de vos suggestions.

P.S : J'ai testé la transition avec img: hover {margin-left: 600px;} dans le CSS, cela fonctionne mais je souhaite un diaporama automatique sans détection d'un quelconque évènement...
salut,
la transition ne se fait pas car tu utilises un "display:none/block" il faudrait passer par "opcaity" pour avoir ce que tu veux.
Bonjour.
---Oui merci, c'est en effet une solution, mais ce n'est pas l'effet que je recherche.
---Je souhaite un effet glissé (slide) de gauche à droite ou inversement : Comme dans un diaporama à l'ancienne ; Je pourrais même l'agrémenter d'un bruit mécanique.
---Après réflexion, je pense qu'il me faut accéder à chaque image par son "id", pour ainsi faire disparaitre l'image n-1 tandis que l'image n apparaît.
---J'y travaille. Pour l'instant mon petit diaporama fonctionne tel qu'il est, avec son affichage brutal.
Encore merci.
Tu n'as pas besoin de récupérer chaque image, l'effet que tu souhaites faire est très simple. Il te faut une mise en page CSS adéquate ensuite tu n'as qu'à récupérer le premier slide que tu décaleras de -n*100% à chaque fois et la transition se fait le "margin-left".
Une exemple tout simple. En vrai tu devras juste enlever la dernière ligne.
Bonsoir.
Je vous remercie pour l'exemple, hélas je n'ai pas le niveau pour comprendre ce code.
Comme vous avez pu le constater je me contente d'utiliser des instructions simples que je pourrais maintenir aisément (et malgré cela, je fais quand même des bourdes...)
Je garde tout cela sous le coude pour l'instant...
Encore merci de votre aide.
Cordialement.
Ah désolé j'aurais peut être dû détailler.
La structure HTML est des plus basiques :

<div id="slideshow">
	<div></div>
	<div></div>
	<div></div>
</div>

La <div> dont l'ID est "slideshow" sera donc le conteneur des "slides" à faire défiler (qui remplacent les images dans votre exemple, m'étant dit que du texte pourrait éventuellement y être ajouté).
À partir de cette structure, on fait en sorte que d'abord, ces slides soient mis côte à côte horizontalement 

#slideshow div {display:inline-block;vertical-align:top;}

("vertical-align:top;" pour qu'ils s'alignent à partir de leur point le plus haut), puis, qu'ils prennent une largeur de 100% de leur conteneur (ici la <div id="slideshow">)

#slideshow div {display:inline-block;vertical-align:top;width:100%;}

et enfin qu'ils soient mis de telle sorte à ce qu'ils soient toujours sur une même ligne (on applique un "white-space:nowrap" sur le parent)

#slideshow {white-space:nowrap;}

On fait ensuite en sorte que les autres <div> qui dépassent soient masqués (avec "overflow:hidden", toujours le parent)

#slideshow {overflow:hidden;white-space:nowrap;}

Maintenant, comme la propriété "white-space" est héritée par défaut, on redonne le comportement normal aux enfants de "slideshow" (avec "white-space:normal")

#slideshow div {display:inline-block;vertical-align:top;white-space:normal;width:100%;}

On ajoute des commentaires entre les <div> dans le code HTML pour supprimer les espaces indésirables qui seront rendus sur le navigateur en raison du "display:inline-block".

<div id="slideshow">
	<div></div><!--
 --><div></div><!--
 --><div></div><!--
 --><div></div>
</div>

On applique ensuite des transitions sur les slides pour avoir un effet glissé lors de l'animation et on obtient donc notre CSS :

#slideshow {overflow:hidden;white-space:nowrap;}
#slideshow div {display:inline-block;vertical-align:top;white-space:normal;width:100%;transition:all .8s ease-in-out;}

Le reste n'étant que décoratif ce n'est pas indispensable de détailler (surtout qu'il n'y a rien d'extraordinaire).

Reste la partie JS qui fera défiler les slides automatiquement.
Comme je l'ai expliqué précédemment, le principe consistera à appliquer un "margin-left" de -n*100%, où n est le slide actuel. On décalant par exemple le premier slide de "-200%", les autres seront également décalés en même temps.
On récupère donc en JS le premier slide

var firstSlide = document.querySelector("#slideshow>div:first-child");

Ensuite on calcule le nombre total de slides présents que l'on stockera dans une variable

var nbrSlides = document.querySelectorAll("#slideshow>div").length;

On créer par la suite une variable qui nous indiquera l'actuel slide (en se la représentant selon les indexes des tableaux où 0 est le premier élément, 1 le deuxième, etc).

var curSlide = 0;

Il nous restera à l'incrémenter à intervalles réguliers. Le code présent dans la fonction qui incrémente revient en plus bavard à écrire

if (curSlide < nbrSlides-1) {
	curSlide = curSlide + 1;
}else {
	curSlide = 0;
}
firstSlide.style.marginLeft = "-" + (curSlide * 100) + "%";

"curSlide < nbrSlides-1" revient à dire que si l'actuel slide est inférieur au nombre total de slides, alors on incrémente, si non, on réinitialise à zéro.

Voilà, j'espère que c'est un peu plus clair.
Bonjour.
Un grand merci pour votre patience.
Force est de constater que je m'étais fourvoyé avec le module CSS "transition" qui me semble difficilement contrôlable via JS (malgré ce qu'avancent certains tutos...)
Personnellement je n'ai jamais obtenu un quelconque résultat malgré mes tests dans tous les sens,
Il semble que "transition" soit un peu "étriqué", car intimement lié aux évènements : effets notamment au click ou au survol (cela a été testé...).
Heureusement j'ai vu des choses extraordinaires en pure JS.
Encore merci, j'oublie le restrictif "transition" et je me fais un bon café de Java.
Cordialement.
Sujet clos
Aller à