KOMPOOS.NL

fading slideshow

home » javascripts » image-effects » fading-slideshow.html

voorbeeld fading slideshow procedure

uitleg cross-over fade show

Op deze pagina staat een opzetje voor een cross fade "plaatjes-show". Zorg er voor dat de afbeeldingen (ongeveer) dezelfde afmetingen hebben, anders wordt het een "rommelig geheel". Voeg zoveel afbeelding toe aan de stylesheet en de html-code als je wilt (kijk even in de code hoe dat moet worden gedaan). Plaats als laatste het javascript (zo laag als mogelijk) in de body-sectie van de pagina. De wissel interval van de plaatjes kan je daar nog instellen en ook de "fade-tijd" van de plaatjes-wissel. Geef ook nog even het aantal gebruikte plaatjes aan in de variabele "totaal_aantal_plaatjes".

html code voorbeeld fading show


<div id="fading_slideshow">
        <span id="slide_show0" class="slide_show0"></span>
        <span id="slide_show1" class="slide_show1"></span>
        <span id="slide_show2" class="slide_show2"></span>
        <span id="slide_show3" class="slide_show3"></span>
        <span id="slide_show4" class="slide_show4"></span>
        <span id="slide_show5" class="slide_show5"></span>
</div>

stylesheet voor de fade transition show


<style type="text/css">
        #fading_slideshow{
                position:relative;
                width:192px;
                height:256px}    
        #fading_slideshow span{
                display:block;
                position:absolute;
                top:0px;
                width:192px;
                height:256px}    
        #fading_slideshow .slide_show0 {background:url(fade-slideshow-1.jpg) no-repeat}
        #fading_slideshow .slide_show1 {background:url(fade-slideshow-2.jpg) no-repeat}
        #fading_slideshow .slide_show2 {background:url(fade-slideshow-3.jpg) no-repeat}
        #fading_slideshow .slide_show3 {background:url(fade-slideshow-4.jpg) no-repeat}
        #fading_slideshow .slide_show4 {background:url(fade-slideshow-5.jpg) no-repeat}
        #fading_slideshow .slide_show5 {background:url(fade-slideshow-6.jpg) no-repeat}
</style>

javascript fade transition slideshow


<script>
/*global window: false */
/*global document: false */
/*global setTimeout: false */
/*global setInterval: false */
var totaal_aantal_plaatjes = 6;
var interval = 6000;
var fade_tijd = 3000;
var i;
var timer;
var invisible = 0;
var visible = 100;
var slideshow_plaatje = 0;
var kick_start = 1;
function slide_opacity(local_opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (local_opacity / 100);
    object.filter = "alpha(opacity=" + local_opacity + ")";
}
function slider_de(id, start_fader, stop_fader, milli_seconde) {
    var de_snelheid = Math.round(milli_seconde / 100);
    timer = 0;
    if (start_fader > stop_fader) {
        for (i = start_fader; i >= stop_fader; i--) {
            setTimeout("slide_opacity(" + i + ",'" + id + "')", (timer * de_snelheid));
            timer++;
        }
    } else if (start_fader < stop_fader) {
        for (i = start_fader; i <= stop_fader; i++) {
            setTimeout("slide_opacity(" + i + ",'" + id + "')", (timer * de_snelheid));
            timer++;
        }
    }
}
function slideshow_animeer() {
    slider_de('slide_show' + slideshow_plaatje, visible, invisible, fade_tijd);
    slideshow_plaatje = (slideshow_plaatje + 1) % totaal_aantal_plaatjes;
    slider_de('slide_show' + slideshow_plaatje, invisible, visible, fade_tijd);
}
function start_slideshow() {
    for (i = 1; i < totaal_aantal_plaatjes; i++) {
        slide_opacity(0, 'slide_show' + i);
    }
    if(kick_start === 1){kick_start++; setTimeout(slideshow_animeer, 2000);}
    timer = setInterval(slideshow_animeer, interval);
}
window.onload = start_slideshow;
</script>