J'essaie de montrer 3 images (en dehors de l'actuellement 12) à la fois en utilisant des animations CSS. J'aimerais d'abord afficher l'image 1-3, puis 4-6, puis 7-9, puis 10-12.
Je l'ai jusqu'à présent, mais je ne peux pas me faire passer la tête pour utiliser: NTH Sélecteurs à afficher le 3 prochain lors de la masquage du reste. P>
Ceci est plus ou moins ce que j'ai jusqu'à présent: p> Exemple ci-dessous [ ou cliquez ici pour JSFIDDLE ]] p> p>
<div id="crossfade">
<img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1">
<img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2">
<img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2">
<img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4">
<img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5">
<img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6">
<img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7">
<img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8">
<img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9">
<img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10">
<img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11">
<img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12">
</div>
3 Réponses :
<div id="crossfade"> <img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1"> <img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4"> <img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5"> <img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6"> <img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7"> <img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8"> <img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9"> <img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10"> <img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11"> <img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12"> </div>
Oui, quelque chose comme ça. Cependant, je voudrais d'abord afficher l'image 1-3, puis 4-6, puis 7-9, puis 10-12. Mais le nombre total d'images est obligé de changer, donc je voudrais une solution dynamique si possible.
Réponse modifiée, mais avoir une solution dynamique dont vous avez besoin de variables et que la nature ne les a pas ...
Le violon dans votre édition est la solution, je cherchais. Merci beaucoup pour votre aide.
J'essaie beaucoup.
mais enfin j'ai atteint "1", "2-3", "4-6", "6-9", "10-12" forte>. p>
<div id="crossfade">
<img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1">
<img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2">
<img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2">
<img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4">
<img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5">
<img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6">
<img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7">
<img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8">
<img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9">
<img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10">
<img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11">
<img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12">
</div>
Bon, pas sûr pourquoi vous avez séparé la première image? Devrait être au premier ensemble, à droite. :)
C'est vraiment proche, mais comme @sinisake mentionne, il devrait être 1-3 d'abord, puis 4-6, puis 7-9, puis 10-12. :-)
@ Sinisake & @ Meek Bienvenue :-). Une fois que je suis informé, vous le savez. Merci :-)
Voici des "blocs" séparés: jsfiddle.net/hajmd/1114 Donc, maintenant, 'Juste' Les animations doivent être appliquées correctement ....
J'apprécie que cela a déjà été répondu, mais voici ma solution de jQuery si cela aide toute personne à l'avenir.
J'ai beaucoup commenté que le code JavaScript devrait donc être auto-explicatif mais efficacement vous fournissez la fonction avec le nombre d'IMG / Diapossiques à montrer et à quelle vitesse de leur montrer et cela fait le reste. C'est une dynamique et s'ajustera pour un nombre impair de diapositives, etc. P>
J'espère que cela aide quelqu'un de toute façon :) p>
http://jsfiddle.net/bradchelly/qjtcojfc/3/ p>
p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="crossfade">
<div id="slideshow_images" style="display:none;">
<img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1">
<img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2">
<img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2">
<img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4">
<img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5">
<img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6">
<img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7">
<img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8">
<img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9">
<img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10">
<img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11">
<img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12">
<img src="http://dummyimage.com/120x185&text=Img 13" alt="Image 13">
<img src="http://dummyimage.com/120x185&text=Img 14" alt="Image 14">
</div>
<div id="slideshow"></div>
</div>
Une petite question: il semble que les images disparaissent assez rapidement, et même si je change $ ("# diaporama"). Fadein ("lent"); à $ ("# SlideShow" ) .fadein (1200); ou quelque chose, il montre toujours les images presque immédiatement - ne pas vraiment se faner. Comment puis-je les faire disparaître de la même manière qu'elles disparaissent? Vous pouvez facilement le voir dans votre exemple. @Brad
@Meek Hey, j'ai réparé ce problème. Veuillez noter le CSS pour masquer les images par défaut et. Children () a été ajouté à $ ("# diaporama"). Enfants (). Fadein (1000); Cela devrait résoudre le problème. Sachez simplement que les temps combinés pour la décoloration ne peuvent pas dépasser le temps total de la diapositive indiquée.
Juste hors de curiosité, êtes-vous allé avec cette solution ou la solution CSS? - Je suis content de travailler pour vous :)
J'ai fini par utiliser cette version. :-)
Qu'est-ce que vous essayez d'accomplir? Peut-être que nous pouvons vous dire une meilleure façon de le faire. Est-ce un curseur que vous voulez créer?
J'ai mis à jour cela pour intégrer le code de Jsfiddle comme exécutable sur cette page. - Meek, ce serait bien que vous ayez peut-être fourni une photo de ce que vous souhaitez pour cela. Voulez-vous seulement 3 images à la fois, toujours apparaître, ou le nombre change-t-il? Devraient-ils apparaître dans la même position que les 3 premières images? etc.
Pourquoi ne pas envelopper les images en 4 distincts éléments où chaque a trois photos dedans. Vous pouvez ensuite animer les éléments au lieu des images.
Je voudrais afficher l'image 1-3 d'abord, puis 5-8, puis 9-12. Mais le nombre total d'images est obligé de changer, donc je voudrais une solution dynamique si possible. Si CSS ne suffit pas, alors JQuery pourrait être une option.