Vroeger was het zó dat IE een transitie (native) in "de aanbieding" had, en dat alle andere browsers veel code nodig hadden om (in een script) hetzelfde effect te bereiken. Dat is nu geheel anders. De strict browsers hebben nog maar heel weinig code nodig om een overgangseffect te maken, en de (hoeveelheid) code die je (nu) voor IE nodig hebt is (buiten proportioneel) veel, en IE9 maakt problemen voor zijn eigen transitions zonder een (CSS3) alternatief te bieden. Het is nu wel genoeg geweest. Als de volgende versie van IE (wordt 10) transitions gaat ondersteunen: best! Zo niet: jammer, maar helaas!
Door IE zijn "eigen broek op te laten halen" is de hoeveelheid code voor de procedure op deze pagina minimaal, en werkt de procedure goed (zonder alle IE "ballast"). Plaats de stylesheet in de head-sectie van de pagina, de html-code en het stukje javascript in de body-sectie; waarbij het javascript zo laag als mogelijk geplaatst dient te worden. Voor de liefhebber hieronder nog de plaatjes om (snel) de procedure op jouw website te proberen.
http://kompoos.nl/javascripts/image-effects/autorun-slideshow-1.jpg, http://kompoos.nl/javascripts/image-effects/autorun-slideshow-2.jpg, http://kompoos.nl/javascripts/image-effects/autorun-slideshow-3.jpg, http://kompoos.nl/javascripts/image-effects/autorun-slideshow-4.jpg, http://kompoos.nl/javascripts/image-effects/autorun-slideshow-5.jpg, http://kompoos.nl/javascripts/image-effects/autorun-slideshow-6.jpg, http://kompoos.nl/javascripts/image-effects/autorun-slideshow-7.jpg en http://kompoos.nl/javascripts/image-effects/autorun-slideshow-8.jpg.
<style type="text/css">
#slideshow_autorun{
width:300px;
height:300px;
margin:20px 0 20px 20px}
#slideshow_autorun img{
border:1px #808080 solid}
#slideshow_autorun li{
list-style-type:none;
visibility:hidden;
position:absolute;
opacity: 0.0;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out}
#slideshow_autorun li.huidige{
visibility:visible;
opacity: 1;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 2.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out}
</style>
<ul id="slideshow_autorun">
<li class="huidige"><a href="#url"><img src="autorun-slideshow-1.jpg" alt="autorun plaatje 1" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-2.jpg" alt="autorun plaatje 2" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-3.jpg" alt="autorun plaatje 1" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-4.jpg" alt="autorun plaatje 2" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-5.jpg" alt="autorun plaatje 3" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-6.jpg" alt="autorun plaatje 3" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-7.jpg" alt="autorun plaatje 4" /></a></li>
<li><a href="#url"><img src="autorun-slideshow-8.jpg" alt="autorun plaatje 5" /></a></li>
</ul>
<script>
/*global slideshow_auto: true */
/*global onload: true */
/*global setTimeout: false */
/*global document: false */
var pauze = 3000;
var e, i, t, a, c = 0,
lengte_slideshow;
function slideshow_auto() {
var slideshow_plaatje = document.getElementById('slideshow_autorun').getElementsByTagName('li');
lengte_slideshow = slideshow_plaatje.length - 1;
for (a = 0; a < slideshow_plaatje.length; a++) {
if (slideshow_plaatje[a].className.indexOf("huidige") === 0) {
slideshow_plaatje[a].className = '';
c = a;
}
}
c++;
if (c > lengte_slideshow) {
c = 0;
}
slideshow_plaatje[c].className = 'huidige';
t = setTimeout(function () {
slideshow_auto();
}, pauze);
}
onload = function () {
t = setTimeout(function () {
slideshow_auto();
}, pauze);}
;
</script>