Bonjour !
comme je ne trouvais pas ce que je voulais, j'ai fait mon propre petit diaporama.
il y a un bouton suivant et un bouton précédent, avec des images qui glissent en haut ou en bas en fonction du bouton cliqué.
actuellement, le div contenant les images monte (ou descend) en faisant disparaitre les images lorsqu'il n'y en a plus.
je souhaiterai que lorsque qu'il n'y a plus d'images, le bouton "suivant" passe en grisé, ou reprenne les premières images.
auriez-vous une piste, ou un tuto à me suggérer ?
voici mon code complet :
en vous remerciant par avance
Modifié par eliza (29 Apr 2014 - 12:47)
comme je ne trouvais pas ce que je voulais, j'ai fait mon propre petit diaporama.
il y a un bouton suivant et un bouton précédent, avec des images qui glissent en haut ou en bas en fonction du bouton cliqué.
actuellement, le div contenant les images monte (ou descend) en faisant disparaitre les images lorsqu'il n'y en a plus.
je souhaiterai que lorsque qu'il n'y a plus d'images, le bouton "suivant" passe en grisé, ou reprenne les premières images.
auriez-vous une piste, ou un tuto à me suggérer ?
voici mon code complet :
<!DOCTYPE html>
<html>
<head>
<style>
#top {
position: relative;
overflow : hidden;
background-color: #ccc;
width: 120px;
height: 500px;
}
#centre {
position: absolute;
top: 0;
left: 0;
}
.images a img {
opacity: 0.3;/* l'opacite que vous voulez au depart */
border: none;/* enlever les border d'une image en lien */
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* Hack IE8 */
filter: alpha(opacity = 25); /* Hack IE 5-7 */
-webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
-moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
-o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
transition: opacity 0.5s ease-in-out; /* on écrit cette ligne à la fin de façon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */
}
.images a:hover img, .images a:focus img {
opacity: 0.9; /* opacite au survol */
-ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
filter: alpha(opacity = 90); /* Hack IE 5-7 */
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="back">Back</button>
<div id="top">
<div id="centre" class="block">
<div class="images">
<a href="#"><img class="block" src="img.png"/></a>
</div>
<div class="images">
<a href="#"><img class="block" src="img.png"/></a>
</div>
</div>
</div>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({top: '+=200px'}, 1000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop();
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({top: '-=200px'}, 1000);
});
</script>
</body>
</html>
en vous remerciant par avance
Modifié par eliza (29 Apr 2014 - 12:47)
