Diaporama avec transition d'une image à l'autre sur clic
|Un| Deux| Trois| Quatre|
Le Javascript
‹script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" language="javascript" type="text/javascript" >
‹/script>
‹script language="javascript" type="text/javascript" >
$(document).ready(function() {
$("#controles span").click(function() {
$("#fsc img").removeClass("opaque");
var imageToShow = $(this).attr("id").replace("for-", "");
$("#fsc #"+imageToShow).addClass("opaque");
$("#controles span").removeClass("selected");
$(this).addClass("selected");
});
});
‹/script>
Le balisage HTML
‹div id="fsc" class="shadow">
‹img id="img_1" src="/images/img_1.JPG" class="opaque"/>
‹img id="img_2" src="/images/img_2.JPG"/>
‹img id="img_3" src="/images/img_3.JPG" />
‹img id="img_4" src="/images/img_4.JPG" />
‹/div>
‹p id="controles">
|‹span class="selected" id="for-img_1">Un|
‹span id="for-img_2">Deux|
‹span id="for-img_3">Trois|
‹span id="for-img_4">Quatre|
‹/p>
Le CSS
p#controles {
text-align:center;
}
#controles span {
padding-right:1em;
padding-left:1em;
cursor:pointer;
}
#fsc {
position:relative;
height:479px;
width:850px;
margin:0 auto;
}
#fsc img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#fsc img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
}