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); }

Musatge